« RIA Unleashed: Boston is a great time | Main | Spider.cfc for ColdFusion »

Not just images: using generated content in CSS

I often use graphics in my CSS stylesheets: for background images, for link descriptors, and every once in a while, for list icons. And it was while reading A List Apart's venerable 2002 article "Taming Lists" that I remembered that graphics aren't the only assets you can specify in stylesheets-- you can also use plain text, in a format called generated content.

The term generated content refers to content that your users see in their browser but isn't present in the underlying HTML code. Instead, it's specified in the stylesheet and generated by the browser. This is especially useful with the :before and :after psuedoclasses. For instance, if you wanted users to see whether any link on your site led to an external site , you could specify the following:

<style>
a[target=_new]:after, a[href^=http]:after { content: " (External link)"; }
</style>

You'll end up with Ping Identity, Inc.. Look at the source of this post, and you'll see that the link is just "<a href="http://www.pingidentity.com" target="_new">Ping Identity, Inc.</a>

Comments (2)

I think you mean "a[href^=http]", not "~=". The former means "begins with" while the latter means "whitespace-delimited list contains"

If you want to be really forward-thinking, you should probably also include "a[rel~=external]". It seems to be gaining traction lately.

Rick, good point about using the "^=" filter instead of the "~=" filter. I've changed my post to reflect the improvement.

Post a comment