CSS content 属性
CSS content 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。
实例
下面的例子在每个链接后插入括号中的 URL：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">a:after{content: " (" attr(href) ")"}</style></head><body><p><a href="https://cankaoshouce.com">参考手册</a> 包含免费的编程教程。</p><p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。</p></body></html>
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
定义和用法
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
说明
该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。
| 默认值： | normal |
|---|---|
| 继承性： | no |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.content="url(beep.wav)" |
可能的值
| 值 | 描述 |
|---|---|
| none | 不会产生伪类元素 |
| normal | :before 和 :after 伪类元素中会被视为 none |
| content specifications | |
| inherit | 规定应该从父元素继承 content 属性的值。 |
相关页面
CSS 参考手册：CSS :before 伪元素
CSS 参考手册：CSS :after 伪元素