CSS 伪元素

Created: October-16, 2018

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

什么是伪元素

CSS 伪元素允许你设置元素或元素部分的样式，而无需向其添加任何 ID 或类。当你只想设置段落的第一个字母以创建首字下沉效果或者你想要在元素之前或之后插入某些内容（仅通过样式表）时，它将非常有用。

CSS3 为伪元素引入了一种新的双冒号（::）语法，以区分它们和伪类。伪元素的新语法如下：

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

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

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

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

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

注意： 可应用 ::first-line 伪元素的 CSS 属性包括：字体属性，背景属性，颜色，字间距，字母间距，文本修饰，垂直对齐，文本转换，行高。

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

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

注意： 可应用 ::first-letter 伪元素的 CSS 属性包括：字体属性，文本修饰，文本转换，字母间距，字间距，行高，浮点数，垂直对齐（仅当’ 浮点 ‘时是’无’），颜色，边距和填充属性，边框属性，背景属性。

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

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

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;
}