Adding Generated Content in CSS2

It's a natural step in the development of CSS- the ability to use CSS to dynamically insert content onto the page that's part of an element's style. For example, a bullet image alongside a link to draw attention to the link can be considered a "styling content", since the image serves no purpose other than to dress up the link. So it makes sense to have CSS at least be able to insert this content (in this case, a bullet image) should you choose to. Well, starting in CSS2, support for Generated Content is here! Note that currently only Firefox 1.0+ and Opera 7.5+ support this feature, while IE 6 doesn't. Well, at least no surprises. So fire up the former browsers if you wish to see some of the live examples (others are simulated).

:before and :after pseudo-elements

The key to generated content in CSS2 is the "before:" and ":after" pseudo-elements. They determine whether the content should be added before or following an element. Five different kinds of generated content is supported as of CSS2:

  • Regular string content
  • Embedded objects, such as an image
  • Attribute values
  • Generated Quotes
  • Counters (ie: for lists)