Generated content – Part One: Content

Warning This article was written over six months ago, and may contain outdated information.

One of the pieces of good news from the Internet Explorer 8 announcement is that the new browser will support generated content. This is something the IE team have been resisting for a while, but it’s a very useful and flexible extension to CSS (whether or not it should be included is an argument for a different time).

At it’s most basic level of usage, content allows you to append strings at the beginning or end of an element. In this first example I’m going to use the :after and :before pseudo-classes to append content to both ends of the h1 element:

<h1>broken-links</h1>

h1:before { content: 'www.'; }
h1:after { content: '.com'; }

The generated output would be:

<h1>www.broken-links.com</h1>

Beyond strings: URI & attr()

Opera allows you to use content without the pseudo-classes, meaning you could use it with the URI value for image replacement:

h1 { content: url('image.png'); }

However, this is currently a non-standard implementation, with no provision for fallback content. Still, one to look out for in the future.

Instead of supplying a string or URI value, you could use attr() to output the value of a specified attribute, like so:

<a href="http://www.broken-links.com/">Broken Links</a>

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

This would return the href value enclosed in parentheses:

<a href="http://www.broken-links.com/">Broken Links
(http://www.broken-links.com/)</a>

Using quotes

You can also use content to append opening and closing quotes:

q:before { content: open-quote; }
q:after { content: close-quote; }

Or to not generate them in certain cases:

q.special:before { content: no-open-quote; }
q.special:after { content: no-close-quote; }

You can define the characters you want to use as your opening and closing quotes by using the quotes property with escaped unicode characters:

q { quotes: '\00AB' '\00BB'; }

In a future post, I’ll write about how we can extend generated content even further with the use of incremented counters.

Comments are closed.