目录

CSS content 属性

❮上一节完整的CSS参考下一节❯

示例

以下示例在每个 <a> 元素后面的括号中插入 href 属性的值：

a::after {
content: " (" attr(href) ")";
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个content属性与：：前和：：后伪元素，插入生成的内容。

默认值：	普通的
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS2
JavaScript 语法：	你不能使用 JavaScript 给元素一个伪类，但还有其他方法可以获得相同的结果：尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
content	1.0	8.0	1.0	1.0	4.0

CSS 语法

content: normal|none|counter|attr| string|open-quote|close-quote|no-open-quote|no-close-quote| url|initial|inherit;

属性值

Value	Description	Example
normal	Default value. Sets the content, if specified, to normal, which default is "none" (which is nothing)	尝试一下 »
none	Sets the content, if specified, to nothing	尝试一下 »
counter	Sets the content as a counter	尝试一下 »
attr(attribute)	Sets the content as one of the selector's attribute	尝试一下 »
string	Sets the content to the text you specify	尝试一下 »
open-quote	Sets the content to be an opening quote	尝试一下 »
close-quote	Sets the content to be a closing quote	尝试一下 »
no-open-quote	Removes the opening quote from the content, if specified	尝试一下 »
no-close-quote	Removes the closing quote from the content, if specified	尝试一下 »
url(url)	Sets the content to be some kind of media (an image, a sound, a video, etc.)	尝试一下 »
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit	尝试一下 »

更多示例

示例

如何通过删除默认项目符号并添加看起来像项目符号 (•) 的 HTML 实体来为 <ul> 或 <ol> 添加项目符号颜色：

ul {
list-style: none; /* Remove HTML bullets */
padding: 0;
margin: 0;
}

li {
padding-left: 16px;
}

li::before {
content: "•"; /* Insert content that looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
}

亲自试一试 »

相关页面

CSS 参考：::在伪元素之前

CSS 参考：::伪元素之后

❮上一节完整的CSS参考下一节❯