CSS Pseudo-elements(伪元素)

CSS Pseudo-elements 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。注意：与伪元素比较，pseudo-classes(伪类) 能够根据状态改变元素样式。 CSS伪元素是一种样式化文档元素的方法，这些元素没有由文档树中的位置明确定义。

什么是伪元素

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

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

css 复制代码

选择器::伪元素{ 属性：值 ; }

::first-line 第一行伪元素

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

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

css 复制代码

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

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

:: first-letter伪元素

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

css 复制代码

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

注意： 可以应用于::first-letter伪元素的CSS属性是：font 字体属性, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align (如果没有属性float或 float属性值为'none), color, margin 和 padding 属性, border 边框属性, background 背景属性.

:: before和:: after伪元素

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

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

css 复制代码

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

伪元素和CSS类

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

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

css 复制代码

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

引用

菜鸟教程