CSS 伪元素

伪元素（pseudo-element）用来给元素添加"并不存在于 HTML 中"的部分，比如段落的第一行、第一个字，或者元素前后的装饰内容。写样式时不用改动 HTML 结构，就能做出很多精巧的效果。

伪元素的基本语法

伪元素使用两个冒号，后面跟一个关键字：

selector::pseudo-element {
  属性: 值;
}

p::first-line { color: red; }        /* 段落的第一行 */
p::first-letter { font-size: 2em; }  /* 段落的第一个字 */

注意：::first-line 与 ::first-letter 只能用于块级元素，且能设置的属性有限（如颜色、字体等）。

用 ::before 与 ::after 插入内容

这两个伪元素会在元素内容的前面或后面生成一个"虚拟盒子"，必须搭配 content 属性才有内容：

a::after {
  content: " ↗";          /* 在链接文字后追加箭头 */
  color: gray;
}
h2::before {
  content: "■ ";
  color: orange;           /* 在标题前加一个橙色方块 */
}

<a href="https://example.com">访问官网</a>
<h2>今日要闻</h2>

运行效果：链接文字后多了一个灰色箭头，标题前多了一个橙色方块——HTML 里完全没有这些字符。

画图标与装饰线

伪元素经常被用来"画"纯 CSS 图标或线条，从而减少图片请求：

.line-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #e74c3c;   /* 标题下方一条红色短线 */
}

运行效果：标题下方出现一条 60 像素宽的红色短装饰线，常用于新闻类网站的小标题。

用伪元素清除浮动

上一节讲的 clearfix 正是 ::after 的经典用途：在容器末尾插入一个空的块级元素并清除浮动，从而撑起父容器高度：

.clearfix::after {
  content: "";
  display: block;
  clear: both;   /* 清掉两侧浮动，父容器不再塌陷 */
}

<div class="clearfix">
  <div style="float: left; width: 50%;">左栏</div>
  <div style="float: left; width: 50%;">右栏</div>
</div>

运行效果：父容器高度恢复正常，两个浮动子栏并排显示，比额外加一个空的 <div style="clear:both"> 更干净。

小结

伪元素用两个冒号表示：::first-line 与 ::first-letter 美化文字局部，::before 与 ::after 借助 content 在元素前后插入装饰内容或图标，clearfix 也是它的拿手好戏。一个冒号是伪类、两个冒号是伪元素，记住这条就不容易混了。