What are good uses of the css `content` property?

Question

Does css "content" property break the rule of content and separation because css is for presentation not to generation content?

Good point. I'd say it does if it's used for actual data.

The quirksmode page on content shows the limitations pretty well. You can't add any kind of styled content at the moment - it will work with too few browsers. You can add only character data.

The author of the quirksmode airs an interesting opinion:

I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.

I agree with this in general, but sometimes there may be cases where you don't want to rely on JavaScript to do the job. The comma example shown by Martin is a case where I find using content justified (although I personally would be feeling better if the commas would already be served coming from server side - it's what I personally would stick to.)

Also, keep in mind that adding commas and quotes through the content property may look bad when your content is viewed from elsewhere - for example in a search results page.

I'd say use it only sparingly, if you really need it.

One popular place that this shows up is in WordPress' default theme

.entry ul li:before, #sidebar ul ul li:before {
    content:"» ";
}

It's good for structured content. I wrote a number of test cases for the W3C's next print CSS rules and the one that seemed cool to me was being able to put "Chapter " and things like that into certain elements, especially when paired with counters. A simplistic example would be something like:

li.chapter:before {content: "Chapter" counter(chapter) ": ";}

None of that's print-specific and it's all presentation information. If you don't want your chapters to be preceded with the word "Chapter", take it out of the CSS. Controlling that in a stylesheet means your print version could have different chapter headings from your screen version your mobile could be different again, without having to have any knowledge of the viewer's device inside your application logic.

It could be used in print style sheets to show urls for links for example:

p a:after {
  content: " (" attr(href) ")";
}

Some link (http://www.somesite.com)

I'm using it to display accesskey in admin panel menu

.menu a[accesskey]:after { content:' [' attr(accesskey) ']'; }

CSS is presentational data. Any content that's only presentation-related is fine in a CSS file. For instance, suppose I want to put « and » around my <h1> tags; that's purely presentational. You could do it with the :before and :after selectors.

It should also be noted that content can also display images:

content: url('my/image.png');

I'd like to add, on a side note, that I'd consider the use of the content property to override already existing content an extremely bad practice.

A common use I see for it is with :before and :after tags to format quotations with some sort of stylized quote box. It can be a quick and easy way to get in stylized elements that you would otherwise have build images out of.

blockquote:before, blockquote:after {
    content: '"';
}

I think this is an okay use for it, because it doesn't really break rules of content and style separation. My feeling is that if it is part of the design of the page, rather than the content, it's probably okay for content: