怎样用CSS :hover和::before制作悬停前缀装饰？

当前这个东西很简洁，但是很更多人不会。先来看，你要有个HTML元素，比如一个链接或者按钮之类的。然后你要用CSS来控制它。

1. 基础设置：定义 ::before 伪元素

::before 是伪元素，用于在元素内容前插入装饰性内容。通常将其定位为绝对定位，并默认隐藏或置于不可见状态，扎心了...。

比如说 你能够这样写CSS：

.link {
  position: relative;
  text-decoration: none;
  color: #000;
}
.link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #007acc;
  transition: width 0.3s ease;
}

这里我们设置了一个链接的样式，并且用 ::before 创建了一个下划线，初始较宽度为0。

2. 悬停时体现装饰：采用 :hover 控制 ::before

当用户将鼠标悬停在元素上时 通过 :hover 修改 ::before 的样式，举个例子展开较宽度、改变颜色或位移，绝绝子...。

你能够这样写：

.link:hover::before {
  width: 100%;
}

此时 悬停时下划线会从左向右伸展，形成动态装饰效果，动手。。

你能够通过调整 ::before 的属性实现更多种视觉改变， 比如旋转、缩放等，给力。。

.icon:hover::before {
  transform: rotate;
}

3. 添加动画效果

为了让动画更平滑，能够采用 transition 属性。你能够指定具体的属性，比如 width 或 transform，不靠谱。。

.link::before {
  transition: width 0.3s cubic-bezier;
}

cubic-bezier 能够让动画更有弹性，提升视觉质感。

4. 实例应用

我们将会再现The Christmas Experiments网站上的悬停效果。我们会用到SVG来塑造形状， 白嫖。 另一方面采用snap.svg来创建悬停时的动画。使......

掌握 :hover 与 ::before 的配合逻辑后 你能够自主设计各种轻巧量级悬停动画， 你看啊... 既美观又不作用于结构语义。将两者结合， 可实现 默认隐藏 → 悬停体现 的...

5. 一些关键知识点

• **选择器**：CSS3引入了更强较大较大的选择器，如类选择器、ID选择器、伪类选择器等，其中:hover伪类是实现鼠标悬停效果的关键。
• **3D质感效果**：通过CSS3的3D变换和阴影效果， 能够实现元素具有立体感的视觉效果，这种效果模拟真实实世界中的物理状态，让界面看起来更加生动和有较深度。

6.

划水。 :hover用于定义鼠标悬停时的样式，::before可在元素内容前插入装饰性内容。当前这个方法不修改装饰效果。. 总体来说就这一些。合理组合 :hover 与 ::before， 挽救一下。 既能降较低 HTML 冗余，又能实现轻巧量级、较高性能的交互装饰效果。不繁杂但简单忽略细节，比如定位上下文和 content 属性必须要存在。其实也没啥良好说的，就是这么简洁。