CSS 伪元素

CSS 伪元素是一种设置文档元素样式的方法，这些元素没有由文档树中的位置明确定义。

什么是伪元素

CSS 伪元素允许您在不添加任何 ID 或类的情况下设置元素或元素部分的样式。在您只想设置段落的第一个字母以创建首字下沉效果或者您只想通过样式表在元素之前或之后插入一些内容等情况下，这将非常有用。

CSS3 为伪元素引入了一种新的双冒号 (::) 语法，以区分它们和伪类。伪元素的新语法可以通过以下方式给出：

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

这些是以下最常用的伪元素：

::first-line 伪元素将特殊样式应用于文本的第一行。

以下示例中的样式规则格式化段落中的第一行文本。第一行的长度取决于浏览器窗口或包含元素的大小。

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

注意： 可以应用于 ::first-line 伪元素的 CSS 属性是：font properties, background properties, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height。

::first-letter 伪元素用于为文本第一行的第一个字母添加特殊样式。以下示例中的样式规则格式化文本段落的第一个字母并创建类似首字下沉的效果。

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

注意： 可以应用于 ::first-letter 伪元素的 CSS 属性是：font properties, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align (only if 'float' is 'none'), color, margin 和填充属性, 边框属性, 背景属性。

::before 和 ::after 伪元素可用于在元素内容之前或之后插入生成的内容。 content CSS 属性与这些伪元素一起使用，以插入生成的内容。

这对于进一步装饰具有丰富内容的元素非常有用，这些内容不应成为页面实际标记的一部分。您可以使用这些伪元素插入常规文本字符串或嵌入对象，例如图像和其他资源。

h1::before {
    content: url("images/marker-left.gif");
}
h1::after {
    content: url("images/marker-right.gif");
}

通常我们只需要使用这些伪元素来设置文本的某个段落或其他块级元素的样式。这就是向伪元素声明一个类的地方。伪元素可以与 CSS 类组合以产生特别针对具有该类的元素的效果。

以下示例中的样式规则将显示所有带有 class="article" 的段落的第一个字母，以绿色和 xx-large 大小显示。

p.article::first-letter {
    color: #00ff00;
    font-size: xx-large;
}