解释 CSS 中伪元素的概念

CSS 中的伪元素（pseudo-element）是指可以在元素的指定位置插入一些样式化的内容。这些内容在文档树中并不存在，只是通过样式来生成的，因此又称为“虚拟元素”。

CSS 中常见的伪元素有 ::before 和 ::after，它们可以用来在元素的开头或结尾插入内容，如下所示：

p::before {
  content: "Before ";
}

p::after {
  content: " After";
}

上述代码会在每个 p 元素的开头插入 "Before "，并在结尾插入 " After"。

除了 ::before 和 ::after，还有其他伪元素可供使用，如 ::first-letter 和 ::first-line，它们分别用于设置第一个字母和第一行的样式。

注意：

• 伪元素之前需要使用双冒号 :: 标识；
• 在 HTML4 中只支持 :before 和 :after，不支持双冒号 ::。

伪元素不仅可以在单个元素上使用，还可以在多个元素上使用，如下所示：

li::before {
  content: "• ";
}

上述代码会在列表项前插入一个点标记。

需要注意的是，伪元素只能在具有 content 属性的元素上使用。content 属性可以是文本、URL、计数器等等，具体使用方式可以参考文档。

总之，伪元素是 CSS 中非常实用的功能，可以用来实现许多有趣的效果，比如说制作轮廓效果、制作文本特殊效果等。使用时需要注意语法和细节，灵活运用才能发挥出它的优势。