【CSS】伪元素属性content

content 是 CSS 中一个用于伪元素 (::before 和 ::after) 的属性。它用于插入伪元素的内容，通常用于在元素的特定位置插入文本、图标或其他装饰性内容。

content 属性的值可以是文本字符串、URL、计数器、引用或生成内容的函数等。

下面是一些常见的用法示例：

1. 插入文本内容：

.element::before {
  content: "前缀：";
}

在这个例子中，使用 ::before 伪元素为 .element 元素的前面插入了文本内容 “前缀：”。

2. 插入图标或装饰性内容：

.element::after {
  content: url(icon.png);
}

在这个例子中，使用 ::after 伪元素为 .element 元素的后面插入了一个图标，图标的来源是 icon.png 文件的 URL。

3. 插入计数器或引用：

ol li::before {
  content: counter(item) ". ";
  counter-increment: item;
}

在这个例子中，使用 ::before 伪元素为有序列表的每个列表项插入了一个计数器，计数器的值是从 1 开始的列表项序号，后面跟着一个点号和空格。

需要注意的是，为了使用 content 属性，必须将伪元素（如 ::before 或 ::after）添加到元素的样式中，并设置 content 的值。

.selector::before {
  content: ...;
}

这样，伪元素的内容就会出现在对应元素的指定位置。