Question

我写了一个包含内容的类，但似乎内容只适用于伪类。

如何修改我的代码？

button.follow{
    content: 'Follow';
}

button.followed{
    content: 'Unfollow';
}

Answer 1

按current CSS specifications，content属性仅适用于:before和:after个伪元素。有一个旧的建议扩展名CSS3 Generated and Replaced Content Module，它允许该属性也适用于真实元素。然而，该提案已有十年之久。它仅在Opera中实现，除了content值是URL表达式的特殊情况，被解释为引用图像 - Chrome和Safari也支持这种情况。

此外，即使是有限的支持在这里也没有多大用处，因为当元素是按钮时，扩展在Chrome上似乎不起作用，而在Opera上，生成的内容显示为这样，而不是在按钮小部件中

由于您的button元素包含空内容，因此您不需要扩展名，因为对于空内容，添加内容相当于替换内容。所以在这种情况下，您只需要使用button.follow:before，就像在Kippie的回答中一样。但请注意，这意味着当禁用CSS时，该按钮显示为完全空白。

因此，无论使用生成内容的原因是什么，而不是HTML中的按钮文本，更强大的方法是使用JavaScript更改内容。当然，JavaScript可以被禁用，但您可以使用实际的按钮文本作为后备，例如<button id=follow>Follow</button>，并在启用JavaScript时替换内容。

Answer 2

你是对的。 content仅适用于:before和:after伪类。只需要这样做你的CSS：

button.follow:before{
    content: 'Follow';
}

button.followed:before{
    content: 'Unfollow';
}

Answer 3

“content属性与：before和：after伪元素一起使用，以插入生成的内容。”

http://www.w3schools.com/cssref/pr_gen_content.asp

更多信息：

http://css-tricks.com/css-content/

css内容没有伪类

3 个答案: