CSS中的 ::before 和 ::after 伪元素是前端开发中最强大的工具之一。它们允许你在不修改HTML结构的情况下，创建虚拟元素并添加样式。下面我将介绍这些伪元素最经典实用的应用场景：

1. 图标装饰与悬浮效果

.icon-button::after {
  content: "→";
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.icon-button:hover::after {
  transform: translateX(5px);
}

‌应用场景‌：在按钮后添加箭头图标，并在悬停时产生动画效果

2. 清除浮动（经典清除浮动方案）

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

‌应用场景‌：解决浮动元素导致父容器高度塌陷的问题

3. 自定义复选框/单选框

input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #3498db;
  margin-right: 8px;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label::before {
  background-color: #3498db;
  background-image: url('checkmark.svg');
}

应用场景‌：创建美观的定制化表单控件

4. 工具提示（Tooltip）

.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
}

‌应用场景‌：鼠标悬停时显示提示信息

5. 图片遮罩效果

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
  opacity: 0;
  transition: opacity 0.3s;
}

.image-container:hover::before {
  opacity: 1;
}

‌应用场景‌：为图片添加悬停时的渐变遮罩效果

6. 自定义列表样式

ul.custom-list li::before {
  content: "★";
  color: #f39c12;
  margin-right: 10px;
}

‌应用场景‌：替换默认的列表符号为自定义图标

7. 价格标签装饰

.price-tag::before {
  content: "¥";
  font-size: 0.8em;
  vertical-align: super;
}

‌应用场景‌：在价格前添加货币符号

8. 内容计数器

ol.custom-counter {
  counter-reset: section;
  list-style: none;
}

ol.custom-counter li::before {
  counter-increment: section;
  content: counter(section) ". ";
  color: #e74c3c;
  font-weight: bold;
}

‌应用场景‌：自定义有序列表编号样式

核心要点总结

1. ‌必须属性‌：伪元素必须设置 content 属性（可以为空字符串）

2. ‌定位控制‌：常与 position: absolute 配合使用

3. ‌层叠顺序‌：默认位于主元素后方，可以使用 z-index 调整

4. ‌内容来源‌：可以通过 attr() 获取HTML属性值

5. ‌组合使用‌：同一个元素可以同时使用 ::before 和 ::after

最佳实践建议

• 使用双冒号语法 ::before/::after（CSS3规范）

• 伪元素内容不会出现在DOM中，适用于纯装饰性元素

• 避免添加重要内容（对SEO和可访问性不友好）

• 合理使用CSS变量增强灵活性

伪元素就像CSS的魔法道具，合理运用它们可以大幅提升开发效率，保持HTML结构简洁，同时实现丰富的视觉效果。掌握这些经典应用场景，你的页面将更加精致和专业！