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

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

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

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.

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)