Various possible uses of the content property: in css2 / css3

Question

I am trying to find some uptodate information about various possible uses for the content: property in css, but only find material in the dungeons of ancient sites on the Internet since 2004 or so, so I thought I should again ask about it in 2011:

 p:before { content: url(dingdong.png); } p:before { content: "some text "; } 

I am very new to the :before selector, as well as to the content: property content: and I heard about it by chance on this question, which the beautiful lady answered very creatively:

How to set bullet colors to UL / LI html lists via CSS without using any images or span tags

Just to find out that there may be some problems with the actual encoding of the content:

li: before {content: "■"; } How to encode this special character as Bullit in an email inbox?

And so my specific question is: besides url() and "text" , are there any other possibilities?
Thank you very much for your suggestions and ideas.

Answer 1

Oh, too much to list. Here are some of the most common cases:

• Special numbering with counter() function along with counter-reset and counter-increment properties

• Clean CSS cleanup with:

   .foo:after { content: ""; display: block; clear: both; } 

• Display attributes, for example, for printing URLs for hyperlinks in a print style sheet

   a[href]:after { content: ' (' attr(href) ') '; } 

• Add typographic ornaments that should not be in HTML, because they are presentation. For example, on my blog, I used it to decorate between posts or links to sidebars.

• Add icons to hyperlinks, depending on where they indicate, for example

   a[href^="http://twitter.com/"]:before { content: url('twitter-icon.png'); } 

• Adding a pointer to create a speech bubble for CSS only:

   .bubble { position: relative; background: silver; } .bubble:after { content: ""; border:10px solid transparent; border-top-color:silver; position: absolute; bottom:-20px } 

And many, many others.

Just be careful: if something is not presentation, it should probably be in your HTML. Users will not be able to select the generated CSS content, and screen programs will ignore it.

Answer 2

You can also use a counter. See http://www.w3schools.com/css/tryit.asp?filename=trycss_content_counter

You can also display a specific attribute of the selected item. See http://jsfiddle.net/EcnM2/

You can also add or remove quotes for opening and closing.

List of w3schools content properties: http://www.w3schools.com/css/pr_gen_content.asp

Answer 3

Generated content will not be accepted by screen readers, so be careful with accessibility issues.
content very useful, but there are times when this text should be in HTML code, because it conveys information and is not only decorative (a bit like CSS background images with informative img with non-empty alt attribute)

• : after and the contents can be used as clearfix without an additional div
• : before and: after entering several backgrounds (up to 3 w / element) in browsers that do not understand the CSS3 function.

EDIT: forgot about Eric Mayer's article in List Apart to print the href attribute of links along with text using content (followed by JS improvement , fyi)