content属性值说明
| 值 | 说明 |
|---|---|
| normal | 将内容设置为“normal”。这是默认值。 |
| none | 将内容设置为“空”。不生成伪元素。 |
| counter | 将内容设置为计数器。 |
| attr | 将内容设置为选择器的属性之一。 |
| string | 将内容设置为文本。 |
| open-quote | 将内容设置为开场白。 |
| close-quote | 将内容设置为右引号。 |
| no-open-quote | 从内容中删除开场白。 |
| no-close-quote | 从内容中删除结束引号。 |
| url | 将内容设置为与图像、声音或者视频一样的媒体。如果无法显示图像，则会忽略该图像或者显示某些占位符。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
content 属性与 ::before 和 ::after 伪元素一起使用以在元素内生成内容，否则不会生成和插入内容。
应始终添加内容。
该属性具有以下值：
- normal
- none
- counter
- attr
- string
- open-quote
- close-quote
- no-open-quote
- no-close-quote
- url
使用 content 属性插入的对象是匿名替换元素。
| 初始值 | normal |
|---|---|
| 应用于 | 伪元素::before 和 ::after |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS2 |
| DOM 语法 | object.style.Content=“none”； |
语法
content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;
content属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: "Name -";
}
.country::before {
content: normal;
}
</style>
</head>
<body>
<h2>Content 属性示例</h2>
<p>My name is Jack</p>
<p class="country">I live in Hangzhou</p>
</body>
</html>
具有“字符串”值的内容属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:before {
content: "列表项";
}
p:after {
content: " ，我是一个字符串";
}
</style>
</head>
<body>
<h2>Content 属性示例</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p>这是段落</p>
</body>
</html>
在下面的例子中，你可以看到没有“close-quote”就不能出现“open-quote”。
具有“open-quote”值的内容属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Content 属性示例</h2>
<p>Hello, my name is Jack</p>
<p>I am from Hz</p>
</body>
</html>
具有“open-quote”和“no-close-quote”值的内容属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: no-close-quote;
}
</style>
</head>
<body>
<p>content属性</p>
</body>
</html>
日期：2020-06-02 22:14:23 来源：oir作者：oir