伪元素选择器的使用场景

伪元素选择器是CSS中一种强大的工具，允许开发者在不修改HTML结构的情况下，为元素的特定部分添加样式或内容。它们以::before和::after为代表，能够实现装饰性效果、内容插入、布局优化等多种功能。

装饰性元素与视觉增强

伪元素常用于添加纯装饰性内容，比如图标、分隔线或背景修饰。通过::before和::after，可以避免在HTML中插入冗余标签。例如，为按钮添加一个箭头图标：

.button::after {
  content: "→";
  margin-left: 5px;
  transition: transform 0.3s;
}
.button:hover::after {
  transform: translateX(3px);
}

另一个典型场景是为标题添加下划线装饰：

h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background: linear-gradient(to right, #ff8a00, #e52e71);
  margin-top: 10px;
}

内容生成与动态文本

伪元素的content属性可以直接插入文本或符号。比如在价格前添加货币符号：

.price::before {
  content: "¥";
  font-size: 0.9em;
}

或者为外部链接自动添加标识：

a[href^="http"]::after {
  content: " (外部链接)";
  font-size: 0.8em;
  color: #999;
}

清除浮动与布局控制

经典的清除浮动方案就是利用伪元素实现的：

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

这种技术可以确保包含浮动元素的容器正确计算高度，避免布局塌陷问题。

自定义列表样式

替代原生列表标记，创建更复杂的项目符号：

ul.custom-list li::before {
  content: "◆";
  color: #4CAF50;
  padding-right: 10px;
}

或者实现编号列表的个性化样式：

ol.custom-numbers li::before {
  content: counter(list-item);
  color: white;
  background: #333;
  border-radius: 50%;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  margin-right: 10px;
}

复杂形状绘制

结合CSS的边框特性，伪元素可以创建各种几何形状。比如对话气泡：

.bubble {
  position: relative;
  background: #e0f7fa;
  padding: 15px;
  border-radius: 10px;
}
.bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #e0f7fa transparent;
}

图像叠加效果

为图片添加滤镜或遮罩层时，伪元素比额外嵌套div更简洁：

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s;
}
.image-wrapper:hover::before {
  opacity: 1;
}

表单元素美化

自定义复选框和单选按钮的样式：

input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  margin-right: 8px;
  vertical-align: middle;
}
input[type="checkbox"]:checked + label::before {
  background: #2196F3;
  border-color: #2196F3;
}

响应式设计辅助

根据屏幕尺寸显示不同的提示内容：

@media (max-width: 600px) {
  .responsive-hint::before {
    content: "移动端视图";
    display: block;
    color: #ff5722;
  }
}

动画与交互效果

创建加载动画时，伪元素可以作为额外的动画元素：

.loader::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

文本特效实现

首字母下沉效果可以通过::first-letter实现：

p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
  margin-right: 5px;
  color: #e91e63;
}

或者使用::selection自定义文本选中样式：

::selection {
  background: #ffeb3b;
  color: #000;
}

多语言内容适配

根据文档语言自动调整引号样式：

:lang(en) q::before { content: '"'; }
:lang(en) q::after  { content: '"'; }
:lang(fr) q::before { content: "«"; }
:lang(fr) q::after  { content: "»"; }

性能优化考虑

相比DOM操作，伪元素动画的性能通常更好，因为浏览器可以将其视为合成层进行优化：

.performance-box::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(texture.png);
  transform: translateZ(0);
  will-change: transform;
  animation: float 3s infinite alternate;
}

浏览器兼容性处理

针对旧版浏览器，可以使用单冒号语法作为回退：

.element:before,
.element::before {
  /* 样式规则 */
}

某些伪元素如::backdrop有特定的兼容场景：

dialog::backdrop {
  background: rgba(0,0,0,0.5);
}

高级创意应用

结合多个伪元素可以创建复杂效果。比如三维卡片：

.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
}
.card::before {
  background: #7b1fa2;
  transform: rotateY(20deg);
  z-index: -1;
}
.card::after {
  background: #512da8;
  transform: rotateY(-20deg);
  z-index: -2;
}
.card:hover::before {
  transform: rotateY(30deg);
}
.card:hover::after {
  transform: rotateY(-30deg);
}