CSS content 属性
下面有更多实例。
定义和用法
content 属性与
::before 及 ::after 伪元素配合使用，来插入生成内容。
说明
该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。
| 默认值: | normal |
|---|---|
| 继承性: | no |
| 支持动画: | no. 阅读有关动画的信息 |
| 版本: | CSS2 |
| JavaScript 语法: | 不能使用 JavaScript 为元素提供伪类， 但还有其他方法可以达到同样的效果： 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
语法
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
属性值
| 值 | 描述 | 例子 |
|---|---|---|
| normal | 默认值，设置content，如果指定的话，正常，默认是"none"（该是nothing） | 试一试 » |
| none | 设置Content，如果指定成Nothing | 试一试 » |
| counter | 设定计数器内容 | 试一试 » |
| attr(attribute) | 设置Content作为选择器的属性之一。 | 试一试 » |
| string | 设置Content到你指定的文本 | 试一试 » |
| open-quote | 设置Content是开口引号 | 试一试 » |
| close-quote | 设置Content是闭合引号 | 试一试 » |
| no-open-quote | 如果指定，移除内容的开始引号 | 试一试 » |
| no-close-quote | 如果指定，移除内容的闭合引号 | 试一试 » |
| url(url) | 设置某种媒体（图像，声音，视频等内容） | 试一试 » |
| initial | 将此属性设置为其默认值。请参阅 initial | |
| inherit | 从其父元素继承此属性。请参阅 inherit | 试一试 » |
更多实例
实例
如何通过删除 ul 或 ol 的默认项目符号并添加类似项目符号(•)的 HTML 实体来为其添加项目符号颜色：
ul {
list-style: none; /* 删除 HTML 项目符号 */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: "•"; /* 插入看起来像项目符号的内容 */
padding-right: 8px;
color: blue; /* 或者你喜欢的颜色 */
}
亲自试一试 »
list-style: none; /* 删除 HTML 项目符号 */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: "•"; /* 插入看起来像项目符号的内容 */
padding-right: 8px;
color: blue; /* 或者你喜欢的颜色 */
}
相关页面
CSS 参考手册: ::before 伪元素
CSS 参考手册: ::after 伪元素
