理解 CSS ::before 伪元素及其实用案例

::before 是 CSS 中的一个伪元素，用于在某个元素的内容前插入额外的内容。通过结合属性样式设置，可以实现丰富的视觉效果。下面我们来详细解析你提供的代码，并探讨其含义、实现的效果以及相关实际应用。

代码解析

.item::before {
  content: '';
  position: absolute;
  left: 12rpx;
  margin-right: 20rpx;
  width: 45rpx;
  height: 45rpx;
  background-color: rgba(14, 222, 255, 0.3);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);

  transition: background-color 0.2s;
}

核心属性的作用

1. content: '';

   • content 是定义伪元素的核心属性。这里设置为空字符串，表明这个伪元素不会显示文本内容，而是一个纯视觉装饰。
   • 真实场景中，这种写法通常用于添加装饰性的几何形状或背景图案。

2. position: absolute;

   • 定义伪元素的定位方式为绝对定位，使其可以相对于最近的 position 不为 static 的父元素自由定位。
   • 例如，absolute 通常配合 relative 父元素实现灵活布局。若父元素 .item 设置为 position: relative;，则 ::before 的位置由 .item 决定。

3. left: 12rpx;

   • 将伪元素相对于其包含块左边缘向右偏移 12 rpx。在微信小程序中，rpx 是响应式像素的单位，能根据屏幕宽度自适应。

4. margin-right: 20rpx;

   • 设置右侧外边距。虽然 ::before 通常与内容无直接交互，但这类布局调整可能为后续内容留出空间。

5. width: 45rpx; height: 45rpx;

   • 定义伪元素的宽高，使其呈现为一个固定尺寸的正方形。结合其他样式，它可以用来绘制形状。

6. background-color: rgba(14, 222, 255, 0.3);

   • 定义伪元素的背景颜色，采用 rgba 格式设置颜色的透明度，使其具有 30% 的不透明度。

7. border-radius: 50%;

   • 将伪元素的形状变为圆形。
   • 举例来说，如果宽高一致并设置 border-radius: 50%;，结果就是一个完美的圆。

8. top: 50%; transform: translateY(-50%);

   • 通过 top: 50%; 将伪元素的顶部对齐到父元素的垂直中线。接着使用 transform: translateY(-50%); 向上偏移其自身高度的一半，从而实现精确的垂直居中效果。
   • 这种方式解决了 CSS 定位中常见的垂直居中难题。

9. transition: background-color 0.2s;

   • 定义了背景颜色的过渡效果。鼠标悬停或触发其他状态改变时，背景色会在 0.2 秒内平滑过渡。
   • 举例来说，配合 :hover 可以在悬停时动态改变颜色：

.item:hover::before {
  background-color: rgba(14, 222, 255, 0.7);
}

实际案例分析

圆形指示器

在一个社交应用中，比如聊天列表，未读消息可以用 ::before 伪元素显示一个圆形标记：

.chat-item {
  position: relative;
  padding-left: 60rpx;
}

.chat-item::before {
  content: '';
  position: absolute;
  left: 12rpx;
  width: 45rpx;
  height: 45rpx;
  background-color: rgba(255, 0, 0, 1);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

动态按钮装饰

例如，在一个表单提交按钮上添加动态视觉反馈：

.button {
  position: relative;
  display: inline-block;
  padding: 10rpx 20rpx;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  overflow: hidden;
}

.button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transition: transform 0.3s;
  transform: scale(0);
  border-radius: 50%;
}

.button:hover::before {
  transform: scale(1);
}

这种设计让用户在点击按钮时，体验到一个流畅的波纹扩散效果。

总结

这段代码通过 ::before 伪元素实现了圆形装饰效果，灵活运用绝对定位、垂直居中、透明度以及圆形化技术。无论是在装饰标记、按钮反馈，还是消息提示中，这种设计方式都极具实用价值。

通过这种方式，我们可以高效地在不增加额外 HTML 元素的情况下，丰富页面的视觉效果，并提供更好的用户体验。