前言

CSS 伪元素是用来样式化元素的特定部分（而非整个元素）的虚拟元素，它不属于 DOM 树，仅通过 CSS 动态创建，用于补充元素的视觉效果或内容，且必须搭配 content 属性（部分场景可省略，但建议显式声明） 才能生效。

核心特点：

1. 伪元素是 “虚拟” 的，DOM 中无对应节点，仅视觉上存在
2. 一个选择器中最多只能有一个伪元素（可与多个伪类组合）
3. 伪元素默认是 inline 元素，需通过 display 调整布局（如 block/inline-block）
4. 可操作的是 “元素的部分”（如首行、首字母）或 “虚拟子元素”（如 ::before/::after）

语法

CSS3 为了区分伪元素和伪类，规定伪元素使用 双冒号 ::（如 ::before），而伪类使用单冒号 :（如 :hover）

按功能分类

CSS 规范定义了 6 个标准伪元素，涵盖 “内容补充”“文本部分样式”“用户界面元素” 三类，以下是每个伪元素的详细用法、场景和注意事项：

::before

1. 作用：在目标元素的内容之前插入一个虚拟子元素
2. 位置：位于元素的 padding 内侧、内容外侧（可通过 position 调整位置）
3. 必需：content 属性（空内容用 content: ""）

index.css

/* 给按钮添加前置箭头 */
.btn::before {
    content: "→";
    margin-right: 8px;
    color: #666;
}

::after

1. 作用：在目标元素的内容之后插入一个虚拟子元素
2. 特性：与 ::before 完全一致，仅插入位置不同
3. 常见场景：清除浮动、添加装饰线、模拟元素（如三角形、气泡）

index.css

/* 父元素添加 .clearfix 类，通过 ::after 清除子元素浮动影响 */
.clearfix::after {
  content: ""; /* 空内容 */
  display: block; /* 转为块级元素 */
  clear: both; /* 清除左右浮动 */
  height: 0; /* 隐藏高度 */
  visibility: hidden; /* 隐藏元素 */
}

::first-line

1. 作用：选中块级元素中第一行文本（行数由容器宽度、字体大小决定，动态变化）
2. 可使用的 CSS 属性：仅文本相关属性（颜色、字体、行高、装饰线等），不可用布局属性（如 width/margin）
3. 限制：仅对块级元素生效（inline 元素需先设 display: block）

index.css

.article {
  width: 300px;
  font-size: 16px;
}
.article::first-line {
  color: #0084ff;
  font-weight: bold;
  text-decoration: underline;
  line-height: 2;
}

::first-letter