css content without pseudo-class

Question

I wrote a class with content but seems content just work for pseudo-classes.

How to modify my code?

http://jsfiddle.net/fuRKC/

button.follow{
    content: 'Follow';
}

button.followed{
    content: 'Unfollow';
}

Answer 1

By current CSS specifications, the content attribute only applies to :before and :after pseudo-elements. There is an old proposed extension, CSS3 Generated and Replaced Content Module, which would allow the property to apply to real elements, too. The proposal is however ten years old. It has only been implemented in Opera, except for the special case where the content value is an URL expression, interpreted as referring to an image – this is supported by Chrome and Safari, too.

Moreover, even the limited support wouldn’t do much good here, since the extension does not seem to work on Chrome when the element is a button, and on Opera, the generated content appears as such, not within a button widget.

Since your button elements have empty content, you don’t really need the extension, since for empty content, adding content is equivalent to replacing content. So in this case, you would just need to use button.follow:before, as in Kippie’s answer. Note, however, that this means that the button appears as completely empty when CSS is disabled.

So whatever might be the reason for using generated content, instead of button text in HTML, a more robust approach would be to change content with JavaScript. JavaScript can be disabled, of course, but you can use actual button text as fallback, e.g. <button id=follow>Follow</button>, and replace the content when JavaScript is enabled.

Answer 2

You are correct. content only works with the :before and :after pseudo classes. Just make your css like this:

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

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