css内容没有伪类

Question

我写了一个内容类,但似乎内容只适用于伪类.

如何修改我的代码？

http://jsfiddle.net/fuRKC/

button.follow{
    content: 'Follow';
}

button.followed{
    content: 'Unfollow';
}

Answer 1

根据当前的CSS规范,该content属性仅适用于:before和:after伪元素.有一个旧的建议扩展,CSS3生成和替换内容模块,它将允许该属性应用于真实元素.然而,该提案已有十年之久.它只在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';
}