Adding Content using CSS3

CSS3 is an exciting new browser technology, it’s implementation is improving with every new browser release. Microsoft is adding a whole host of CSS3 selectors to the their next version of Internet Explorer, version 9. Until IE9 is released and the vast majority of users start using it, (2016 maybe?) it’s a case of having to use CSS3 quite cautiously.

Using the ‘progressive enhancement’ methodology, we build a website that works in all browsers first, then ‘layer on’ the cool features and ‘nice to haves’ after, so users with modern browsers get the full site experience and older browsers still have access to all the content. CSS3 sits in the ‘nice to have’ category for the moment.

While looking through the W3C CSS3 Working Draft I came across a section called ‘Inserting content into an element’. The CSS3 pseudo-elements listed here are used to add content to the page using CSS. Cool! ….wait a second; for years we’ve been separating layout from content, allowing us to easily edit a whole website layout from a single file. The pseudo-elements seem to be going against this mantra! Uh ohh! It’s controversial, but I believe if used responsibly the pseudo-elements shouldn’t cause any major accessibility issues.

::before & ::after

The ::before and ::after pseudo-elements are used to add content before and after the content inside the selected element (surprising huh!):

1
2
3
4
5
6

#element::before {
    content: "Paradox: ";
    }
#element::after {
    content: " Now my head hurts."
    }

View a demo here.

The specifications even allow you to add more content by iterating the pseudo-elements, so ::after::after (or ::after(2)) but this isn’t supported in current browsers I have tested. I’m personally hoping that part of the specification isn’t implemented, as you can have too much of a good thing. You could end up in the nightmare situation of pages completely generated using CSS3 using multiple levels of ::before and ::after.

The CSS3 specification has also outlined the pseudo-element ::outside but it hasn’t been implemented yet in the current version of Firefox I’m using (3.6.3).

Outline will allow you to wrap an element inside another element and then add styling to it. Usually you’d modify the source code by adding extra divs to do this, but it isn’t always possible. Outline would have been very useful over the past couple of years for adding ‘sliding doors’ and rounded corners where needed, without having to clutter up the mark-up with ‘for style’ only tags. Oh well it’s a tool for the future.

I can’t say I’m a big fan of these new pseudo-elements as they seem to be stepping on HTML’s toes. It’s hard to think of a situation where you’d want the CSS to be writing content to the pages since it isn’t accessible to screen readers or search engines, but I’m sure there are some. The only example that springs to mind is when you add a ‘:’ after the label on a form field, you don’t want a screen reader to read out the ‘colon’ so you add it using CSS.

I’d love to hear where other people plan on using ::before and ::after, or where you are using them at the moment.