CSS 伪元素

伪元素 (Pseudo-elements) 是一个附加到选择器上的关键字，它允许你为元素的特定部分设置样式。例如，你可以用它来为段落的第一个字母或第一行设置样式，或者在元素的内容之前或之后插入生成的内容。

伪元素的语法是使用双冒号 ::，然后是伪元素的名称。

selector::pseudo-element { property: value; }

注意: 在旧的 CSS 规范中，伪元素使用单冒号 :，就像伪类一样。为了向后兼容，现代浏览器仍然支持单冒号的语法。但是，为了区分伪类和伪元素，最佳实践是对伪元素使用双冒号 ::。

`::first-line`

::first-line 伪元素用于向块级元素的第一行文本应用样式。行的长度取决于多种因素，如元素宽度、文档宽度和字体大小等。

css

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

`::first-letter`

::first-letter 伪元素用于向块级元素的第一行中的第一个字母应用样式。这常用于创建“首字下沉”的效果。

css

p::first-letter {
  font-size: 200%;
  color: #8A2BE2;
  float: left;
  margin-right: 5px;
}

`::before` 和 `::after`

::before 和 ::after 是最强大、最常用的伪元素。它们用于在所选元素的内容之前或之后插入一些生成的内容。

你必须使用 content 属性来为这两个伪元素指定要插入的内容。即使内容是空的，content 属性也是必需的。

`content` 属性的值

字符串: content: "Read more: ";
attr(): content: attr(data-tooltip); - 获取元素上某个属性的值。
url(): content: url(image.jpg); - 插入图片。
空字符串: content: ""; - 这是最常见的用法，通常用于创建纯装饰性的形状或用于清除浮动 (clearfix hack)。

示例

1. 为列表项添加自定义项目符号

css

li::before {
  content: "\2713\00A0"; /* ✓ 字符和不换行空格 */
  color: green;
}

2. 创建一个工具提示 (Tooltip)

html

<span class="tooltip" data-tooltip="这是提示信息">鼠标悬停在我身上</span>

css

.tooltip::after {
  content: attr(data-tooltip);
  /* ...其他用于定位和美化提示框的样式... */
}

3. 创建装饰性形状

因为 ::before 和 ::after 表现得像元素的子元素，我们可以像对待普通元素一样为它们设置样式，包括背景、边框、尺寸和定位。这使得它们成为创建复杂 UI 效果而无需添加额外 HTML 元素的强大工具。

css

.box {
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  background-color: red;
}

`::marker`

::marker 伪元素用于选择列表项的标记框，例如 <li> 元素的项目符号或 <summary> 元素的箭头。

css

::marker {
  color: red;
  font-size: 1.2em;
}

`::selection`

::selection 伪元素用于设置用户在页面上用鼠标选中的部分内容的样式。

css

::selection {
  color: white;
  background: #ff6b6b;
}

伪元素为 CSS 提供了强大的能力，可以在不修改 HTML 的情况下，为页面添加额外的视觉元素和样式。

CSS 伪元素 ​

::first-line ​

::first-letter ​

::before 和 ::after ​

content 属性的值 ​

示例 ​

::marker ​

::selection ​