没有伪类的CSS内容

Question

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

如何修改我的代码？

http://jsfiddle.net/fuRKC/

button.follow{
    content: 'Follow';
}

button.followed{
    content: 'Unfollow';
}

Answer 1

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

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

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

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