伪元素：虚拟内容

伪元素表示元素内容的一部分或由 CSS 生成的虚拟盒子。::before 和 ::after 适合装饰，::first-letter、::first-line 和选中文本伪元素改变特定内容片段的样式。

.external-link::after {
  content: " ↗";
}
.quote::before {
  content: "“";
}

content 生成的文字通常不应承担不可替代的信息，因为它可能不在文档源和可访问名称中。需要真正可读的内容时，应把文本写进 HTML。伪元素也不是任意 DOM 节点，不能像普通元素一样挂载事件或承载交互。

实验与练习

给外部链接添加装饰箭头，再关闭样式表，确认链接文字仍能说明目的。将一段关键提示从 ::before 移回 HTML，比较复制、搜索和辅助技术读取结果。

可运行微实验：从匹配到胜出

在一个页面中保留三个同名元素，给它们同时设置类型、类、属性和伪类规则。先在 Elements 的 Matched CSS Rules 记录“命中但未胜出”的声明，再只改变一个条件：元素增加类、属性值改变、祖先增加类或规则移入另一层。每次只记录匹配集合、特异性/层级和最终 computed value，避免把“选择器没命中”和“命中了但被覆盖”混为一谈。

<p class="notice" data-state="error">消息</p>
<style>p { color: gray } .notice { color: navy } [data-state="error"] { color: crimson }</style>

常见错误

• 用伪元素承载必须被读者获取的业务信息。
• 误以为伪元素可以成为交互按钮。
• 忘记 content 是生成内容入口，导致伪元素没有显示。

继续阅读

规则都匹配后，浏览器需要决定哪条声明获胜，下一篇进入层叠：层叠规则。

练习

1. 用最小输入复现“伪元素：虚拟内容”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案