12-23-CSS伪元素解释

CSS伪元素并没有真正生成HTML元素，它们只是在视觉呈现层面上的效果。

关键区别：

1. 用JavaScript获取DOM时，无法直接获取到伪元素
2. 伪元素不会出现在HTML结构中
3. 伪元素不会影响文档的语义结构
4. 不能给伪元素绑定事件监听器

举个例子：

<div class="box">你好</div>

.box::after {
  content: "世界";
}

虽然页面上会显示”你好世界”，但：
– document.querySelector('.box').childNodes 只能看到”你好”
– 查看元素时只能看到 <div class="box">你好</div>
– 伪元素”世界”只存在于浏览器的渲染层面

所以更准确地说，伪元素是CSS提供的一种视觉效果机制，而不是真正的DOM元素。这也是为什么叫”伪”元素。