CSS content 属性

定义和用法

content 属性与 :before:after 伪元素配合使用,来插入生成内容。

说明

该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。

实例

下面的例子在每个链接后插入括号中的 URL:

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

亲自试一试

CSS 语法

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

属性值

描述
normal 默认值。如果指定此值,会将内容设为正常状态,其默认值为 "none"(即不显示任何内容)。
none 如果指定此值,会将内容设为不显示任何内容。
counter 将内容设置为计数器。
attr(attribute) 将内容设置为选择器的某个属性值。
string 将内容设置为指定的文本。
open-quote 将内容设置为前引号。
close-quote 将内容设置为后引号。
no-open-quote 如果指定此值,将从前引号内容中移除前引号。
no-close-quote 如果指定此值,将从后引号内容中移除后引号。
url(url) 将内容设置为某种媒体(如图像、音频、视频等)。
initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

技术细节

默认值: normal
继承性: no
版本: CSS2
JavaScript 语法: object.style.content="url(beep.wav)"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 4.0