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.

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.