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.