CSS 属性：`content`

在框的内容之前或之后放置的生成内容。

与 ::before 和 ::after 伪元素选择器结合使用。

可能的值

值	描述	示例
[字符串]	文本。	`"BLOB!"`
[URL]	资源，最常见的是图像。	`url("blob.png")`
`open-quote`	由 `quotes` 属性定义的。通常是标准的开引号。
`close-quote`	由 `quotes` 属性定义的。通常是标准的闭引号。
`no-open-quote`	没有生成内容，但保持引号嵌套级别。
`no-close-quote`	没有生成内容，但保持引号嵌套级别。
`attr(`[名称]`)`	给定 HTML 元素属性的值。[名称] 应为匹配属性名称的字符串。	`attr(class)`
`counter(`[名称]`)`	由 `counter-increment` 属性设置的计数器 [名称]（一个字符串）的值。	`counter(countername)`
`counter(`[名称]`,` [样式]`)`	由 `counter-increment` 属性设置的计数器 [名称]（一个字符串）的值，具有 [样式]，这相当于 `list-style-type` 属性的值。	`counter(countername, lower-roman)`
`counters(`[名称]`,` [字符串]`,` [样式]`)`	所有名为 [名称]（一个字符串）的计数器的值，由 [字符串]（也是一个字符串——意外吧！）分隔。可选的 [样式] 是一个等同于 `list-style-type` 属性的值。	`counters(countername, " - ", lower-roman)`
[组合]	前面值的所有组合都可以应用，用空格分隔。	`"This" url("plus.jpg") "that"`
`normal`	等同于 `none`。默认值。
`none`	无生成内容。
`inherit`
`initial`
`unset`

示例


li::before {
    content: "+";
}

blockquote p::before {
    content: open-quote;
    font-size: 4em;
    vertical-align: middle;
}
blockquote p::after {
    content: close-quote;
    font-size: 2em;
    vertical-align: middle;
}

.blob {
    counter-increment: blobnum;
}
.blob::before {
    content: "Blob #" counter(blobnum) ": " url("blob.jpg");
}

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

可能的值

示例

浏览器支持