CSS 内容属性未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6727795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS content property not displaying
提问by Greycrow
I am new to CSS and I'm following a book example:
我是 CSS 的新手，我正在学习一本书的例子：
Iv'e copied the following from the book and saved it as HTML. all the css properties seem to work except the "content" property which does not display.Thanks in advance.
我从书中复制了以下内容并将其保存为 HTML。除了不显示的“内容”属性外，所有 css 属性似乎都可以工作。提前致谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> The content property </title>
<style type='text/css' media='all'>
div {
content: "Hello, world!";
}
</style>
</head>
<body>
<div></div>
</body>
</html>
回答by pixelfreak
contentis used with :beforeor :afterlike so:
content与:before或:after像这样使用：
div:after
{
content: "Hello, world!";
}
Regardless, I've only used contentfor special cases (to clear floated elements, for example). I've never actually used this to insert content. You generally want to separate content and presentation anyway, so I think this is a bad idea. Which book are you reading? :)
无论如何，我只用于content特殊情况（例如清除浮动元素）。我从未真正使用过它来插入内容。无论如何，您通常都希望将内容和演示文稿分开，所以我认为这是一个坏主意。你在读哪本书？:)
回答by SLaks
The contentproperty only applies to CSS pseudo-elements such as :beforeand :after.
该content属性仅适用于 CSS 伪元素，例如:before和:after。
You cannot use it to set the content of an arbitrary element.
您不能使用它来设置任意元素的内容。
回答by AlienWebguy
The contentproperty only works for :beforeand :afterto prepend or append content to said nodes, like so:
该content属性仅适用于:before并:after为所述节点添加或附加内容，如下所示：
.email-address:before {
content : "Email address: ";
}<ul>
<li class="email-address">[email protected]</li>
</ul>The output would be
输出将是
? Email address: [email protected]
? 电子邮件地址：[email protected]
