css伪元素::before和::after有哪些实用应用技巧

css伪元素::before和::after用于在选中的元素前后插入生成内容，这些内容由content属性定义，默认是行内元素，可通过display修改。它们不会出现在dom中，却能被样式控制，是简化结构和实现视觉效果的好帮手。

基础用法与content属性

使用伪元素必须设置content，哪怕值为空字符串。content支持字符串、attr()获取属性、url()引用资源等。

.box::before {
  content: "前缀";
  color: #f00;
}
.box::after {
  content: attr(data-tip);
  font-size: 12px;
}

技巧一：清除浮动防止高度塌陷

父元素包含浮动子元素时会丢失高度，可用::after插入块级空内容并清除浮动，这是经典的clearfix方案。

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

技巧二：绘制图形与小三角

借助border和伪元素能画出对话框小三角，无需额外标签。

.tooltip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 10px;
  border-width: 0 6px 6px;
  border-style: solid;
  border-color: transparent transparent #333;
}

技巧三：文本修饰与图标占位

在列表项前加自定义符号，或用::before预留图标位置，保持html干净。

<ul class="list">
  <li>项目一</li>
  <li>项目二</li>
</ul>

.list li::before {
  content: "•";
  margin-right: 6px;
  color: green;
}

注意事项

• 伪元素不支持表单元素如<input>，因为这类元素不能包含生成内容。
• 设置定位时记得给原元素position: relative，伪元素用absolute贴合。
• content内的特殊字符注意转义，避免解析异常。

合理运用::before和::after能减少冗余标签，让样式与结构分离更清晰。

css伪元素before_after修改时间：2026-07-27 01:51:14