我写了一个有内容的类，但似乎内容只适用于伪类。
如何修改我的代码？
button.follow{
content: 'Follow';
}
button.followed{
content: 'Unfollow';
}
问问题
5087 次
3 回答
6
根据当前的 CSS 规范，该属性仅content适用于伪元素。有一个旧的提议扩展，CSS3 Generated and Replaced Content Module，它也允许该属性应用于真实元素。然而，该提案已有十年之久。它只在 Opera 中实现，除了值是 URL 表达式的特殊情况，被解释为引用图像——Chrome 和 Safari 也支持这一点。:before:aftercontent
此外，即使有限的支持在这里也没有多大用处，因为当元素是按钮时，扩展似乎在 Chrome 上不起作用，而在 Opera 上，生成的内容显示为这样，而不是在按钮小部件中。
由于您的button元素具有空内容，因此您实际上并不需要扩展，因为对于空内容，添加内容相当于替换内容。所以在这种情况下，你只需要使用button.follow:before，就像 Kippie 的回答一样。但是请注意，这意味着当 CSS 被禁用时，该按钮将显示为完全空的。
因此，无论出于何种原因使用生成的内容，而不是 HTML 中的按钮文本，更强大的方法是使用 JavaScript 更改内容。当然，可以禁用 JavaScript，但您可以使用实际的按钮文本作为后备，例如<button id=follow>Follow</button>，并在启用 JavaScript 时替换内容。
于 2013-09-24T08:56:11.627 回答
3
你是对的。content仅适用于:before和:after伪类。让你的 CSS 像这样：
button.follow:before{
content: 'Follow';
}
button.followed:before{
content: 'Unfollow';
}
于 2013-09-24T08:28:58.350 回答
0
“content 属性与 :before 和 :after 伪元素一起使用，以插入生成的内容。”
http://www.w3schools.com/cssref/pr_gen_content.asp
更多信息：
于 2013-09-24T08:28:56.307 回答