CSS `content` 属性

说明

content CSS 属性与 ::before 和 ::after 伪元素结合使用以在元素中生成内容。

下表总结了此属性的使用上下文和版本历史记录。

属性的语法如下：

content:

下面的示例显示了 content 属性的作用。

h1::before {
    content: "Note: ";
    display: inline;
}

注意： display CSS 属性控制使用 content 属性生成的内容是放置在块框还是内联框。

下表描述了该属性的值。

值	说明
`normal`	对于 `:before` 和 `:after` 伪元素，它计算为无。这是默认值。
`none`	伪元素不会生成。
`counter`	此值将 `content` 设置为计数器。有关详细信息，请参阅 `counter-reset` 和 `counter-increment` 属性。
string	插入指定的字符串（文本内容）。
`url(url)`	`url()` 的值指定外部资源（例如图像）。如果资源或图像无法显示，则要么被忽略，要么出现一些占位符。
`attr(attribute)`	此函数在所选元素之前或之后插入指定属性的值。如果选择器的主题没有指定的属性，则会插入一个空字符串。注意：属性名称不应包含在引号中。
`open-quote`	插入左引号。这些值将替换为来自引号属性的适当字符串。
`close-quote`	插入右引号。这些值将替换为来自引号属性的适当字符串。
`no-open-quote`	不显示左引号，但增加（减少）引号的嵌套级别。
`no-close-quote`	不显示右引号，但增加（减少）引号的嵌套级别。
`initial`	将此属性设置为其默认值。
`inherit`	如果指定，则关联元素采用其父元素 `content` 属性的计算值。

所有主要的现代浏览器都支持 content 属性。

请参阅以下教程： CSS 伪元素.