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 Inter­net Explor­er 8 announce­ment is that the new brows­er will sup­port gen­er­at­ed con­tent. This is some­thing the IE team have been resist­ing for a while, but it’s a very use­ful and flex­i­ble exten­sion to CSS (whether or not it should be includ­ed is an argu­ment for a dif­fer­ent time).

At it’s most basic lev­el of usage, con­tent allows you to append strings at the begin­ning or end of an ele­ment. In this first exam­ple I’m going to use the :after and :before pseu­do-class­es to append con­tent to both ends of the h1 element:

<h1>broken-links</h1>

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

The gen­er­at­ed out­put would be:

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

Beyond strings: URI & attr()

Opera allows you to use con­tent with­out the pseu­do-class­es, mean­ing you could use it with the URI val­ue for image replacement:

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

How­ev­er, this is cur­rent­ly a non-stan­dard imple­men­ta­tion, with no pro­vi­sion for fall­back con­tent. Still, one to look out for in the future.

Instead of sup­ply­ing a string or URI val­ue, you could use attr() to out­put the val­ue of a spec­i­fied attribute, like so:

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

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

This would return the href val­ue 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 open­ing and clos­ing quotes:

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

Or to not gen­er­ate them in cer­tain cases:

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

You can define the char­ac­ters you want to use as your open­ing and clos­ing quotes by using the quotes prop­er­ty with escaped uni­code characters:

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

In a future post, I’ll write about how we can extend gen­er­at­ed con­tent even fur­ther with the use of incre­ment­ed counters.

Comments are closed.