CSS 伪元素

CSS 伪元素用于为元素的指定部分设置样式，常用的 CSS 为元素包括：::first-line, ::first-letter, ::before, ::after. ::selection, ::marker。

CSS 伪元素的应用场景有：

• 为元素的第一个字母或行设置样式
• 在元素内容之前或之后插入内容

CSS 伪元素的语法

CSS 伪元素是一个附加至 CSS 选择器末的关键词。

selector::pseudo-element { property: value; }
--------  --------------   --------  -----
   ↑           ↑            ↑        ↑
 选择器        伪类          属性      值

伪元素以 :: 开头，附加在选择器的后面。

! 伪元素使用双冒号开头，也可以像伪类一样使用单冒号开头。CSS2 和 CSS1 中的伪类和伪元素都使用了单冒号语法，在 CSS3 中伪元素开始使用双冒号，这是 W3C 试图区分伪类 和伪元素的尝试。但是为了向后兼容，CSS3 中仍可使用单冒号的伪元素。

::first-line 伪元素

::first-line 伪元素可改变段落首行文字的样式。

将所有 <p> 元素中文本的第一行的颜色显示为绿色：

p::first-line {
  color: #00ff00;
}

!! 注意： ::first-line 伪元素只能被应用到块级元素。

::first-letter 伪元素

::first-letter 伪元素可改变段落第一个文字的样式。

将所有 <p> 元素中文本的第一个文字的颜色显示为绿色：

p::first-letter {
  color: #00ff00;
}

! 注意： ::first-letter 伪元素只能被应用到块级元素。

::before 伪元素

::before 伪元素用来创建一个伪元素，插入作为已选中元素的最后一个子元素。

在每个 <h1> 元素的内容之前插入一个心形符号：

h1::before {
  content: "♥";
}

::after 伪元素

::after 伪元素用来创建一个伪元素，插入作为已选中元素的最后一个子元素。

在每个 <h1> 元素的内容之前插入一个心形符号：

h1::after {
  content: "♥";
}

::marker 伪元素

::marker 伪元素为选择的列表项的标记（项目符号或者数字）设定样式。

为列表项的项目符号设定颜色和大小：

ul li::marker {
  color: red;
  font-size: 1.5em;
}

::selection 伪元素

::selection 伪元素为用户选取的内容设定选取状态的样式。

适用于 ::selection 伪元素的 CSS 属性有： color, background, cursor, outline。

将所选文本变为白色且具有黑色背景：

::selection {
  color: white;
  background: black;
}

所有 CSS 伪元素