CSS 伪类和伪元素有什么区别？::before 能代替真正的 HTML 内容吗？

下面是一段教学用的模拟面试。

🧑‍💻 面试官： 伪类和伪元素有什么区别？

🙋‍♂️ 我：一个冒号是伪类，两个冒号是伪元素。

🧑‍💻 面试官： 那 :before 为什么也能用？悬停变色和加一个箭头，分别改了谁？

🙋‍♂️ 我：悬停是按钮的状态，箭头是额外显示的内容。

🧑‍💻 面试官： 如果按钮文字全部放进 ::before，还合适吗？

冒号数量是书写形式。真正要分清的是：我们在「按条件选元素」，还是在「设置元素某一部分的样式」。

面试速答（60 秒版）

伪类按状态、位置或关系等条件选择元素，例如 :hover、:focus-visible、:nth-child()。它改变的是符合条件的元素的样式。

伪元素用于设置元素某一部分的样式，或者生成 ::before、::after 这样的内容。例如给首行变色，或者在按钮前加一个装饰箭头。

现代写法一般用单冒号写伪类、双冒号写伪元素。不过历史上的几个伪元素仍支持单冒号，不能只用冒号数量解释概念。

工程里，装饰可以用伪元素，重要文本和操作入口优先放进真正的 HTML。鼠标悬停之外，也要考虑键盘焦点。

伪类选条件，伪元素改部分

图：伪类选条件，伪元素改部分。

知识点详解：一个是选择条件，一个是样式作用的部分

hover 没有增加一个新元素

假设页面上有一个“继续阅读”按钮。button:hover 的意思是找到被指针悬停的按钮，再给它设置背景色。

按钮还是原来的按钮，DOM 里没有凭空多出一个叫 hover 的节点。条件不满足，规则就不再匹配。

伪类也不都是短暂的交互状态。:nth-child(2) 按兄弟元素中的位置匹配，:has() 可以按关系匹配。把伪类说成“只管鼠标状态”，同样不完整。可以结合 MDN 伪类文档理解这些用途。

before 处理的是生成内容

给按钮加一个装饰箭头，可以这样写：

.read-more::before {
  content: "→";
  margin-right: 0.4em;
}
.read-more:hover {
  background: #e8f2ff;
}
.read-more:focus-visible {
  outline: 3px solid #2468b4;
  outline-offset: 3px;
}

::before 可以理解成由 CSS 生成的、位于元素内容前面的一个可设置样式的部分。不过，它不是能用 querySelector 直接拿到的普通 HTML 子节点。

这里箭头负责装饰，“继续阅读”仍写在按钮或链接本身。CSS 是不同语言项目共享的浏览器规则，不另提供伪造的 TS、Python API。

另外，伪元素不都生成新内容。::first-line 处理现有文本的首行，::selection 处理选中部分。概念不能只围着 before、after 展开。

重要内容为什么不应该只写在 content 里？

假设表单只在 ::before 里写“密码至少八位”。这段提示看起来存在，但在不同辅助技术和浏览器组合里，读取行为未必一致；复制、翻译和内容维护也不直观。

不要把“某些读屏工具可能读到”当成“能稳定代替语义内容”。MDN 的 ::before 可访问性说明也提醒，不应依赖它提供重要信息。

更稳妥的方式是把必要文本写进 HTML，再通过合适的语义和关联属性表达它与控件的关系。伪元素负责视觉装饰，不负责承担整个内容结构。

重要文字留在 HTML

图：重要文字留在 HTML。

单冒号的 before 是怎么来的？

早期 CSS 对伪元素也使用单冒号。后来用双冒号区分，浏览器为了兼容旧页面，保留了 :before、:after 等历史写法。

因此，面试中先解释作用对象，再补充语法习惯，比只背“一冒号、两冒号”完整得多。

面试官继续追问

hover 和 focus-visible 一样吗？

不一样。前者关注指针悬停，后者关注浏览器判断需要明显展示的焦点。键盘用户没有悬停，也需要知道自己正在操作哪个控件。

箭头代表必要的操作含义，怎么办？

同时提供可靠的文本或可访问名称，不要求读者只从装饰符号猜作用。实际验收还要检查键盘操作与辅助技术读取。

面试速记卡

伪类：按状态、位置、关系等条件匹配元素。

伪元素：设置某一部分或生成内容的样式。

冒号：现代写法有区分，历史写法有兼容例外。

内容：重要文本留在 HTML，装饰再交给 CSS。

交互：鼠标有反馈，键盘也要看得见焦点。