Псевдоэлементы CSS (Псевдоэлементы)

CSS Pseudo-elements 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。注意：与伪元素比较，pseudo-classes(伪类) 能够根据状态改变元素样式。

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

什么是伪元素

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

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

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

::first-line 第一行伪元素

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

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

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

:: first-letter伪元素

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

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

:: before и :: after суррогатные элементы

::before и ::after суррогатные элементы могут использоваться для вставки созданного содержимого до или после содержимого элемента. content Когда свойства CSS используются вместе с этими суррогатными элементами, вставляется созданное содержимое.

Это очень полезно для дальнейшей отделки элементов с богатым содержимым, которые не должны быть частью реального маркера страницы. Вы можете использовать эти суррогатные элементы для вставки обычных строк или вставки объектов (например, изображений) и других ресурсов.

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

Суррогатные элементы и классы CSS

Обычно, нам нужно использовать эти суррогатные элементы для установки текста в каком-либо абзаце или другомБлочныйСтиль элемента. Там, класс для суррогатного элемента будет работать. Суррогатные элементы могут быть использованы сКласс CSSКомбинируйте их для создания эффекта, особенно для элементов с этим классом.

Следующие примеры стилей правил будут показывать первую букву всех абзацев с классом class="article", зеленого цвета, размером xx-large.

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