content
是 CSS 中一个用于伪元素 (::before 和 ::after) 的属性。它用于插入伪元素的内容,通常用于在元素的特定位置插入文本、图标或其他装饰性内容。
content
属性的值可以是文本字符串、URL、计数器、引用或生成内容的函数等。
下面是一些常见的用法示例:
- 插入文本内容:
.element::before {
content: "前缀:";
}
在这个例子中,使用 ::before
伪元素为 .element
元素的前面插入了文本内容 “前缀:”。
- 插入图标或装饰性内容:
.element::after {
content: url(icon.png);
}
在这个例子中,使用 ::after
伪元素为 .element
元素的后面插入了一个图标,图标的来源是 icon.png
文件的 URL。
- 插入计数器或引用:
ol li::before {
content: counter(item) ". ";
counter-increment: item;
}
在这个例子中,使用 ::before
伪元素为有序列表的每个列表项插入了一个计数器,计数器的值是从 1 开始的列表项序号,后面跟着一个点号和空格。
需要注意的是,为了使用 content
属性,必须将伪元素(如 ::before 或 ::after)添加到元素的样式中,并设置 content
的值。
.selector::before {
content: ...;
}
这样,伪元素的内容就会出现在对应元素的指定位置。