伪元素

CSS **伪元素** 是添加到选择器中的一个关键字，它允许您为所选元素的特定部分设置样式。

语法

css

selector::pseudo-element {
  property: value;
}

例如，::first-line 可用于更改段落第一行的字体。

css

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

双冒号 (::) 用于伪元素。这将伪元素与使用单个冒号 (:) 表示法的伪类区分开来。

伪元素并不独立存在。伪元素所属的元素称为其源元素。伪元素必须出现在复杂或复合选择器中的所有其他组件之后。选择器中的最后一个元素是伪元素的源元素。例如，您可以使用 p::first-line 选择段落的第一行，但不能选择第一行的子元素。因此，p::first-line > * 是无效的。

可以根据源元素的当前状态选择伪元素。例如，p:hover::first-line 在段落本身被悬停（伪类）时选择段落的第一行（伪元素）。

注意：当选择器列表包含无效的选择器时，整个样式块将被忽略。

由一组 CSS 规范定义的伪元素包括以下内容

注意：浏览器仅支持对最初的四个伪元素使用单冒号语法：::before、::after、::first-line 和 ::first-letter。