Jump to main navigation, main content

Archived entry | Matt Wilcox .net

When to use CSS generated content

There’s often a misunderstanding about CSS generated content, which most likely comes from the fact it’s called ‘content’, when designers are used to thinking of the term under the context of the ‘three tiers’ of the modern web: XHTML (content), JavaScript (behaviour), CSS (display). The trouble is that CSS generated content isn’t ‘content’ in the same manner as that.

CSS generated content should really serve only two purposes:

  1. De-obfuscating existing content. e.g., making the otherwise hidden href attribute visible on a print style sheet1.
  2. Adding purely graphical content where there is no semantic skeleton (I use this technique to create none-square image thumbnails on my own site. If you’re interested in learning more about that take a look at my 2006 re-design notes)

CSS generated content shouldn’t be thought of as adding semantic content. If that CSS generated content conveys meaning (i.e., it has semantic value), then it belongs in the HTML, not the CSS.


  1. This could be achieved as follows:

    1. a:after {
    2. content : ” ( URL: ” attr(href) ” ) ”; }


From the archives

Other enteries filed under:

Web Development

Site information

Built with valid XHTML and CSS, designed with web standards and accessibility in mind. Best viewed in a modern browser [Firefox, Safari, Opera]

This domain and all content is a copy of my old website, for historical purposes only.