Html CSS“内容”不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19771329/
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" is not working
提问by Borsn
I would like to add the text for the paragraph through CSS rather then in the HTML, because it's a subject to change with the responsiveness of the website.
我想通过 CSS 而不是在 HTML 中添加段落的文本，因为它会随着网站的响应能力而改变。
Now I can't get it to work, and I am wondering if there is something wrong with the CSS?
现在我无法让它工作，我想知道 CSS 是否有问题？
Also, is this the only way this could be done (with pure HTML and CSS) or is there another way to target a text and change it with every resolution?
此外，这是唯一可以完成的方法（使用纯 HTML 和 CSS）还是有另一种方法来定位文本并使用每种分辨率进行更改？
HTML:
HTML：
<p class="title"></p>
CSS:
CSS：
p.title {
width: auto;
height: auto;
position: relative;
float: left;
clear: none;
margin: 40px 0 0 0;
padding: 0;
display: block;
font-family: 'Fjalla One', sans-serif;
font-weight: 400;
font-size: 36px;
color: #d76e50; color: rgba(215, 92, 52, 0.9);
cursor: default;
content:"TITLE GOES HERE";
}
回答by Delan Azabani
The CSS contentproperty can only be used with ::beforeand ::afterpseudo-elements. You could work around this by creating a child element which only has styles on ::afterfor example, and also includes the contentproperty for the text that is dependent on resolution via media queries.
CSScontent属性只能与::before和::after伪元素一起使用。您可以通过创建一个仅具有样式的子元素来解决此问题::after，并且还包括content依赖于通过媒体查询的分辨率的文本的属性。
回答by Spudley
CSS is not the place to put content, even if you do want the content to change as part of your responsive design.
CSS 不是放置内容的地方，即使您确实希望将内容作为响应式设计的一部分进行更改。
The whole point of HTML/CSS/JS is to have a separation between content, styling and scripting. Putting content into CSS or styling into HTML breaks that, no matter what your intentions are.
HTML/CSS/JS 的重点是在内容、样式和脚本之间进行分离。无论您的意图是什么，将内容放入 CSS 或将样式放入 HTML 都会打破这一点。
But to directly answer your question: CSS contentis only valid in a very few cases. It is not available on general selectors (precisely because of the points I made above).
但是直接回答您的问题：CSScontent仅在极少数情况下有效。它在一般选择器上不可用（正是因为我上面提到的几点）。
contentis only available for selectors that result in pseudo-elements being added to the page. In practice, this means that you can only really use contentwith ::beforeand ::afterselectors.
content仅适用于导致伪元素被添加到页面的选择器。实际上，这意味着您只能真正使用contentwith::before和::after选择器。
And even in these cases where you can use it, you should still not be using it in the way you've described. With ::beforeand ::after, it is not intended for putting actual content into your CSS; it is meant really just for tasks like inserting a marker next to something, such as the little symbol you get next to external links in sites like Wikipedia. That kind of thing is still styling, and is thus correct to be in CSS, even though it does add 'content'.
即使在您可以使用它的这些情况下，您仍然不应该按照您描述的方式使用它。使用::beforeand ::after，它不是为了将实际内容放入您的 CSS 中；它实际上仅适用于诸如在某些内容旁边插入标记之类的任务，例如您在维基百科等网站中的外部链接旁边获得的小符号。这种东西仍然是样式，因此在 CSS 中是正确的，即使它确实添加了“内容”。
Note that content inserted using ::beforeand ::aftermay behave differently to other content in your site. For example, you won't be able to access the pseudo-element via Javascript, and your user may not be able to select the text.
请注意，使用::before和插入的内容::after可能与您网站中的其他内容不同。例如，您将无法通过 Javascript 访问伪元素，并且您的用户可能无法选择文本。
The more typical way of achieving what you're trying to do is to have two (or more) elements on the page which contain the various different content strings, and to have your responsive CSS code trigger one of them to be visible and the others hidden according to the page size.
实现您想要做的事情的更典型的方法是在页面上有两个（或更多）元素，其中包含各种不同的内容字符串，并让您的响应式 CSS 代码触发其中一个可见，其他根据页面大小隐藏。
回答by Alireza Ahmadi
CSS content property can be applied only pseudo-elementsaccording to the Mozilla Developer Networks Documents, so you can add this lines of code to your css file:
根据 Mozilla 开发者网络文档，CSS 内容属性只能应用伪元素，因此您可以将以下代码行添加到您的 css 文件中：
p.title::after {content: 'TITLE GOES HERE';}
