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

Question

I'm trying to find some uptodate info about various possible uses for content: property in css but only find stuff in the ancients dungeons of the web dating from 2004 orso so I thought I have to ask this in 2011 again:

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

p:before {
content: "some text ";
}

I'm very new to both the :before selector as well as the content: property and heard of it accidentally on this question which was answered very creatively by a lovely lady:

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

Only to find out that some problems might occur concerning the actual encoding of the content:

li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?

And so my concrete question is: besides url() and "text", are ther other possibilities?
Thanks very much for your suggestions and ideas.

Brann

content is not a selector. It's a property. – Tilley

In addition to the common uses, many unusual and practical uses are possible. For one such practical, unusual use, see #4987444 – Imprimis

Answer 1

Oh, too many to list. Some of the most common cases are:

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

• Pure CSS clearfix with:

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

• Display attributes, eg to print URLs for hyperlinks in a print stylesheet

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

• Add typographic ornaments that shouldn't be in the HTML because they're presentational. For example, in my blog, I've used it for the ornaments between posts or sidebar links.

• Add icons to hyperlinks, depending on where they point, like

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

• Adding a pointer to make a CSS-only speech bubble:

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

And many, many other.

Just beware: If something is not presentational, it should probably be in your HTML. Users will not be able to select CSS generated content, and screen readers will ignore it.

Waftage

Placing code blocks in lists is a pain when it comes to Markdown. You need to indent the code blocks one more level, for a total of 8 spaces per line. I've edited your post for you - looks much better now! – Tilley

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 certain attribute of the element selected. See http://jsfiddle.net/EcnM2/

You can also add or remove opening and closing quotes.

w3schools content property list: http://www.w3schools.com/css/pr_gen_content.asp

Cis

Answer 3

Generated content won't be perceived by screen readers so beware of accessibility issues.
content is very useful but there are cases where this text should be in the HTML code because it conveys information and isn't only decorative (a bit like background images in CSS vs informative img with a non-empty alt attribute)

• :after and content can be used as a clearfix with no extra div
• :before and :after bring multiple backgrounds (up to 3 w/ the element itself) to browsers that don't understand the CSS3 feature.

EDIT: forgot about Eric Meyer's article in A List Apart about printing the href attribute of links along with their text with the help of content (it was followed by a JS improvement, fyi)

Phytogeography