Generated Content

CSS – Generated Content

After spending some of today in discussion with a friend on how to work with generated content in CSS, I’ve decided to take that discussion a bit further and go over the basics here. First, a great reference for generated content is on the W3C site, and can be found here.

Typically you are going to use generated content in combination with a pseudo class. For instance, the :before pseduo class is often associated with generated content. To elaborate on that, consider this simple example:

Goal: Create a list of links, and flag some links a generated ‘New!’ text that is red to indicate which of those links has been updated recently.

So, start by making the simple unordered list (code shown after).

<li><a href="#">Section Foods</a></li>
<li><a href="#">Section Books</a></li>
<li><a href="#">Section Links</a></li>

Now, we have a list a you probably have some general formatting that should apply to the list elements (in your CSS file). But, you can now add some generated content. It’s very simple to do. You’ll add these two rules to your CSS file:

li.updated:before { content: "New! ";}

Then you want to change it so that the color of that text is red, so you simply modify that code as follows:

li.updated:before { content: "New! ";color: red }

Now you can continue on by adding the class="updated" indicator to the list items where they have been updated. For example:

<li class="updated"><a href="#">Section Foods</a></li>

Pretty simple eh? You could do the same thing with an image of course. Another great use for this ability to generate content is for quotes. I have used this quite a few times, and though pseudo-classes are not supported by Explorer, it is still quite a nice feature to tinker with. You can easily generate an open quote and an end quote around your blockquoted text. You just need to add the following rules to your CSS:

blockquote:before { content: open-quote }
blockquote:after { content: close-quote }

There are lots of little things you can do with the generated content, just keep in mind that since pseudo classes are not globally supported by browsers, in order to stay true to accessibility, they should only be used to enhance. Don’t make your content rely on them.