CSS 伪元素是一种特殊的元素，用于向某些选择器添加特殊的效果。它们不是文档树中的实际元素，而是由CSS样式表动态生成的。伪元素在样式表中用于定义元素的某个特定部分的样式。CSS 伪元素以双冒号 :: 开头，但一些旧的浏览器可能只支持单冒号 : 语法。虽然按照最新的CSS规范，建议使用双冒号，但单冒号在大多数情况下仍然有效。
以下是一些常用的CSS伪元素及其用途：
-
::before 和 ::after
这两个伪元素用于在元素的内容前后插入新的内容或样式。它们经常与 content 属性一起使用来定义要插入的内容。这些伪元素非常适合添加装饰性元素，如图标、引号、额外文本等。 -
::first-letter
用于选择元素文本的第一个字母，并允许你对其应用特殊的样式。这通常用于创建首字下沉效果。 -
::first-line
用于选择元素文本的第一行，并允许你对其应用特殊的样式。这对于改变段落的第一行文本的样式特别有用。 -
::selection
用于定义用户选择（如使用鼠标拖动）的文本或元素的样式。这可以用于改变文本选择时的背景色、文字颜色等。 -
::placeholder
用于定义HTML <input> 或 <textarea> 元素占位符文本的样式。占位符文本是用户开始输入之前显示的灰色提示文本。 -
::marker（较新，支持度有限）
用于定义列表项标记（如项目符号或编号）的样式。然而，这个伪元素的支持度目前还比较有限。 -
::backdrop（Web组件和全屏API中使用）
用于定义全屏元素或对话框背后的背景样式。这主要用于Web组件或在使用全屏API时改变背景样式。
使用伪元素时，需要注意以下几点：
伪元素不是真正的DOM元素，因此它们不会出现在DOM树中。
伪元素通常与 content 属性一起使用（除了 ::selection 和 ::backdrop），因为你需要定义要插入的内容或样式。
伪元素可以像其他元素一样接受CSS样式，如颜色、字体、边距、填充等。
伪元素的选择器应该附加到它们要影响的元素上，例如 p::first-letter 会选择所有 <p> 元素中的第一个字母。
