CSS伪元素

了解CSS伪元素的基础知识

伪元素用于设置元素的特定部分的样式。

他们以双冒号开头::

有时,您可能会发现它们带有单个冒号,但出于向后兼容的原因,这仅是受支持的语法。您应该使用2个冒号将它们与伪类区分开。

::before::after可能是最常用的伪元素。它们用于在元素之前或之后添加内容,例如图标。

这是伪元素的列表:

伪元素 目标
::after 在元素之后创建一个伪元素
::before 在元素之前创建一个伪元素
::first-letter 可以用来设置文本块的第一个字母的样式
::first-line 可以用来设置文本块第一行的样式
::selection 定位用户选择的文本

让我们做一个例子。假设您要使段落的第一行的字体大小稍大一些,这在排版中很常见:

p::first-line {
  font-size: 2rem;
}

或者,也许您希望第一个字母更大胆:

p::first-letter {
  font-weight: bolder;
}

::after::before不太直观。我记得当我不得不使用CSS添加图标时使用了它们。

您指定content该属性可在元素之后或之前插入任何类型的内容:

p::before {
  content: url(/myimage.png);
}

.myElement::before { content: “Hey Hey!”; }

免费下载我的CSS手册


更多CSS教程: