CSS {1>伪选择器（例如::after和::before）允许向页面添加文本内容。例如：
CSS
p:after { content:' Batman!' }
HTML
<p>Na Na Na Na Na Na</p>
在浏览器中输出
Na Na Na Na Na Na Batman!
我的问题，使用相同的HTML源代码，这就是 CSS
的原因 p { content:'My hero is' }
p:after { content:' Batman!' }
无法输出
My hero is Batman!
但输出了这个？
Na Na Na Na Na Na Batman!
内容属性的w3c规范：http://www.w3.org/TR/CSS21/generate.html#propdef-content
回答 - 我正在查看CSS2.1规范。即使没有::after和::before伪选择器，CSS3 spec indicates也是可能的。但并非每个浏览器都实现它。
答案 0 :(得分：5)
规范content:指定只能与*伪元素:before和:after一起使用，没有比我害怕更好的答案。< / p>
12.2 The 'content' property
此属性与
:before和:after伪元素一起使用 生成文档中的内容。
但是，如果问题应解释为为什么我们不允许在任何我们喜欢使用CSS的地方添加内容？答案只是理论上的，但很简单：
CSS并不是一种提供新内容的方式，它是一种格式化现有内容的方法。
“您不应该使用CSS更改任何内容，除此之外没有更多内容。
:before和:after伪元素已经经常讨论，因为它们打破了格式和内容之间的障碍。“ - refp
:before / :after是一个很好的资源，因为它们允许您以一种在出现之前无法实现的方式格式化您的数据。请注意，我使用“格式”一词，因为我仍然认为它是格式化程序，而不是数据生成器。
提出一个可用的替代品，在格式化和内容之间仍然有明确的界限，这将是非常困难的（并且令人沮丧），所以这是（至少对我来说）一个可以接受的中间路线，我可以住它
我必须承认，当他们第一次出现时，我并不是那些伪元素的忠实粉丝。
答案 1 :(得分：5)
引用的CSS 2.1规范说：“适用于:: before和：after伪元素”。 CSS3 Generated and Replaced Content Module的草案放宽了这一限制，该草案已经过时（2003年），过时但仍部分实施。除了使用URL值（用于插入图像）之外，Opera似乎支持content普通元素，而Chrome和Safari仅针对URL值执行 。所以你的代码实际上适用于Safari。
除非对模块的规范工作取得一些进展，否则不太可能提供更广泛的支持。在W3C CSS module status page上，该模块位于“重写”部分，注释为“严重过时”。
答案 2 :(得分：1)
实际上可以直接在元素上使用content属性，而不能仅在伪元素上使用 p { content:'My hero is' }
属性。试试
{{1}}
在Opera中，你会看到你想要的结果。事情是其他浏览器还不支持它。
有关生成内容cat的许多其他有趣的事情可以在CSS3 Generated and Replaced Content Module中找到，但我们必须等待一段时间，直到浏览器静默实现它。