什么是伪元素

伪元素是 CSS 提供的"虚拟盒子"：它并不存在于 HTML 里，却能像真实元素一样被设置样式。最常用的是 ::before 和 ::after，它们分别在元素内容的前面和后面插入一段内容。

最小可运行示例

.tip::before {
  content: "💡 ";
  color: orange;
}
<p class="tip">这是一条提示信息</p>

浏览器渲染结果是：💡 这是一条提示信息。注意 content 是必填属性，没有它伪元素不会显示。

技巧一：不写图标标签，纯 CSS 加图标

很多网站的"新"角标、"→"箭头都是伪元素做的，HTML 保持干净：

.more::after {
  content: " →";
  transition: margin-left 0.2s;
}
.more:hover::after {
  margin-left: 4px;
}

鼠标悬停在链接上时，箭头会向右滑动一点，页面交互立刻有了"呼吸感"。

技巧二：清除浮动（经典用法）

浮动元素会导致父容器高度塌陷，一行伪元素就能解决：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
<div class="clearfix">
  <div style="float: left; width: 100px; height: 60px; background: #7ab6f5;">浮动块</div>
</div>

父容器的最终高度是 60px 而不是 0——这就是 .clearfix 的作用。

技巧三：画装饰线与竖条

伪元素配合定位可以画出标签、下划线、装饰条：

.title {
  position: relative;
  padding-left: 14px;
}
.title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 4px;
  height: 16px;
  background: #3b82f6;
  border-radius: 2px;
}

标题左侧的蓝色竖条完全是 CSS 画出来的，HTML 里不需要任何 <span>。

技巧四：attr() 读取属性内容

content 还能读取元素自身的属性，常用于显示链接地址：

a::after {
  content: " (" attr(href) ")";
  color: #999;
  font-size: 0.85em;
}
<a href="https://example.com">示例站点</a>

页面上会显示：示例站点 (https://example.com)。

小结

  • ::before / ::after 在元素内容前后插入虚拟盒子，content 必填
  • 常见用途：图标与箭头、清除浮动、装饰竖条、属性内容展示
  • 伪元素的好处是 HTML 保持简洁，样式全部收敛到 CSS
  • 装饰类内容优先用伪元素，而不是往 HTML 里堆空标签