8. CSS 伪元素

本节目标：掌握常用伪元素，能在不修改 HTML 的情况下给元素添加内容和样式。

伪元素 vs 伪类

先搞清楚区别：

伪类（:hover）选择元素的某种状态
伪元素（::before）选择元素的某个部分，或创建不存在于 DOM 中的「虚拟元素」

伪元素用双冒号 :: 表示（CSS3 规范），单冒号 :before 也能用但不推荐。

::before 和 ::after

这两个是最常用的伪元素。它们在元素内容的前后创建一个虚拟子元素：

/* 在元素内容前面插入 */
.box::before {
  content: "前缀 - ";
  color: #999;
}

/* 在元素内容后面插入 */
.box::after {
  content: " - 后缀";
  color: #999;
}

<p class="box">内容</p>
<!-- 显示为：前缀 - 内容 - 后缀 -->

Note

::before 和 ::after 必须配合 content 属性使用，否则不会显示。即使没有内容也要写 content: ""。

实际用途：装饰性图标

/* 链接前加箭头 */
.link::before {
  content: "→ ";
  color: #3498db;
}

/* 引用块前后加引号 */
.quote::before {
  content: """;
  font-size: 24px;
  color: #ccc;
}
.quote::after {
  content: """;
  font-size: 24px;
  color: #ccc;
}

实际用途：清除浮动

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

实际用途：纯 CSS 图形

/* 用 ::before 画一个三角形 */
.tooltip::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 20px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #333;
}

::first-line 和 ::first-letter

这两个伪元素用于设置文本的首行或首字母样式：

/* 段落首行：红色小型大写 */
p::first-line {
  color: #e74c3c;
  font-variant: small-caps;
}

/* 段落首字母：大号红色 */
p::first-letter {
  font-size: 200%;
  color: #e74c3c;
  font-weight: bold;
  float: left;
  margin-right: 4px;
}

<p>这是一个段落。首字母会变大变红，首行会变成小型大写字母。</p>

Tip

::first-letter 常用于实现「首字下沉」效果，是杂志排版的经典手法。

::selection

::selection 用来设置用户选中文本时的样式：

/* 全局选中文本样式 */
::selection {
  background: #3498db;
  color: white;
}

/* 特定元素内的选中文本 */
.highlight::selection {
  background: #f39c12;
  color: #fff;
}

Note

::selection 支持的属性有限，包括 color、background-color、cursor、caret-color、outline、text-decoration、text-emphasis-color、text-shadow 等。

伪元素速查

伪元素	作用
`::before`	在元素内容前插入虚拟元素
`::after`	在元素内容后插入虚拟元素
`::first-line`	选中元素的首行文本
`::first-letter`	选中元素的首字母
`::selection`	选中被用户选中的文本

完整示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>伪元素示例</title>
  <style>
    body {
      font-family: Georgia, serif;
      padding: 40px;
      max-width: 600px;
      margin: 0 auto;
    }

    /* 首字下沉 */
    .article p::first-letter {
      font-size: 280%;
      float: left;
      line-height: 1;
      margin-right: 8px;
      color: #8e44ad;
      font-weight: bold;
    }

    /* 首行样式 */
    .article p::first-line {
      font-weight: bold;
    }

    /* 链接前加图标 */
    .external::before {
      content: "🔗 ";
      font-size: 12px;
    }

    /* 引用样式 */
    blockquote {
      position: relative;
      padding: 20px 30px;
      background: #f8f9fa;
      border-left: 4px solid #3498db;
      margin: 20px 0;
    }

    blockquote::before {
      content: """;
      font-size: 60px;
      color: #3498db;
      position: absolute;
      top: -10px;
      left: 10px;
      line-height: 1;
    }

    /* 选中文本样式 */
    ::selection {
      background: #3498db;
      color: white;
    }
  </style>
</head>
<body>
  <div class="article">
    <h2>伪元素的力量</h2>
    <p>CSS 伪元素让你能在不修改 HTML 的情况下，给元素添加额外的内容和样式。它们像魔法一样，凭空创造出虚拟的元素。</p>
    <p>首字下沉、装饰图标、清除浮动，这些效果都可以用伪元素实现。</p>
  </div>

  <blockquote>
    伪元素是 CSS 中最优雅的特性之一。
  </blockquote>

  <p>访问 <a href="#" class="external">外部链接</a> 了解更多。</p>
</body>
</html>

学完这章你应该知道

伪元素用双冒号 ::，伪类用单冒号 :
::before 和 ::after 必须配合 content 使用
伪元素常用于添加装饰、清除浮动、画图形
::first-letter 可做首字下沉
::selection 自定义选中文本样式

下一章开始进入盒模型，这是 CSS 布局的核心概念。