CSS伪元素

了解CSS伪元素的基础知识

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

他们以双冒号开头::。

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

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

这是伪元素的列表：

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

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手册