伪元素 ::before 和 ::after 的使用

CSS 伪元素的语法、用法和常见应用场景

问题

::before 和 ::after 伪元素如何使用？单冒号 :before 和双冒号 ::before 有什么区别？

解答

单冒号 vs 双冒号

/* CSS2 语法 - 单冒号 */
.element:before { }
.element:after { }

/* CSS3 语法 - 双冒号 */
.element::before { }
.element::after { }

CSS3 引入双冒号是为了区分伪元素和伪类：

::before、::after 是伪元素，创建虚拟元素
:hover、:focus 是伪类，选择特定状态的元素

两种写法在现代浏览器中都能工作，但推荐使用双冒号 :: 语法。

基本用法

/* 必须设置 content 属性，否则伪元素不会显示 */
.element::before {
  content: "前缀";
}

.element::after {
  content: "后缀";
}

常见应用场景

1. 添加装饰性图标

<a href="#" class="link">下载文件</a>

.link::before {
  content: "📎 ";  /* 在文字前添加图标 */
}

.link::after {
  content: " →";  /* 在文字后添加箭头 */
}

2. 清除浮动

/* 经典的 clearfix 方案 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

3. 绘制装饰图形

<div class="tooltip">提示信息</div>

/* 用伪元素绘制三角形箭头 */
.tooltip {
  position: relative;
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}

.tooltip::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  /* 三角形 */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #333;
}

4. 自定义列表样式

<ul class="custom-list">
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>

.custom-list {
  list-style: none;
  padding-left: 0;
}

.custom-list li::before {
  content: "✓";
  color: green;
  margin-right: 8px;
}

5. 引用样式

<blockquote class="quote">这是一段引用文字</blockquote>

.quote {
  position: relative;
  padding-left: 30px;
  font-style: italic;
}

.quote::before {
  content: """;
  position: absolute;
  left: 0;
  top: -10px;
  font-size: 48px;
  color: #ccc;
}

使用限制

伪元素不能用于以下元素：

/* 这些元素不支持伪元素 */
img::before { }    /* 无效 - 替换元素 */
input::before { }  /* 无效 - 替换元素 */
br::before { }     /* 无效 - 空元素 */

原因：伪元素插入的内容在元素内部，而替换元素和空元素没有内部内容区域。

关键点

双冒号 :: 是 CSS3 标准，用于区分伪元素和伪类
content 属性必须设置，即使是空字符串 ""
伪元素是行内元素，需要设置 display 才能调整宽高
替换元素（img、input）和空元素（br、hr）不支持伪元素
伪元素不在 DOM 中，无法通过 JavaScript 直接操作