A complete guide to CSS pseudo-elements

Pseudo-elements are fantastically useful as they allow greater control of elements and selectors without extra HTML mark-up.

As with much advanced CSS, pseudo-element take up has been slow amongst web designers because of poor support in Internet Explorer.

However, as IE6 is rapidly becoming extinct that only leaves IE7 to consign to the dustbin of history.

CSS 2.1 pseudo-elements

There are only two pseudo-elements that are understood by all popular browsers including IE from version 5 upwards, and they are :first-letter and :first-line.

Their purpose should be quite obvious but below are two examples of how they work.

p:first-letter {
font-size : 150%;
}

p:first-line {
font-size : 150%;
}

The first code block increases the size of the first letter in the paragraph by 150% while the second increases the first line of the paragraph by 150%. It's definitely worth trying out :first-letter as that can add a nice typographic touch to your design.

The final two CSS 2.1 pseudo-elements are :after and :before.

A vital part of these two is also the :content declaration.

As an example:

p:before {
content : " Text added to the beginning of the paragraph";
}

p:after {
content : " Text added to the end of the paragraph";
}

This can actually add text to a document without using HTML! But you don't have to use it to add text, try adding images with a line such as content: url(“image.gif”).

As with any CSS it really is a good to roll your sleeves up and experiment with it. Use the code above and play around with images, margins and padding – why not add an image of quotation marks on either side of a blockquote?

You'll be surprised just how great it can look in action. They work in every browser apart from Internet Explorer 6 and 7.

CSS 3.0 pseudo-elements

It was decided by the W3C that as of 3.0 pseudo-elements should use the double colon instead of a single one. This is so they can be clearly distinguished from pseudo-classes.

So the difference is:

We all should be using the double colon declaration by now but the problem with this is – yes, you guessed it – Internet Explorer, where support for the double colon version is buggy. So stick with CSS 2.1.

However, CSS 3.0 has brought us five new pseudo-elements:

::selection ::value ::choices ::repeat-item ::repeat-index

Lets examine them all.

::selection

When you drag your cursor across the page in order to then right click and copy, the browser uses its inbuilt style sheet to change the background colour and the colour of the text. This is always a dark background and a light text colour. ::selection allows you to change this, as below:

::-moz-selection{
  background-color: red;
  color: yellow;
}

::selection {
 background-color: red;
  color: yellow;
}

If you use the CSS above then when the user drags their mouse over some text there will be a red background and yellow text in Opera, Safari, Chome and Firefox (but only with the moz prefix)

Is it also possible when using this pseudo-element to change the cursor and outline.

::value / ::choices / ::repeat-item / ::repeat-index

These four are all directly connected to XForms. What are they?! I hear you cry. Xforms are a never-ending W3C project that is supposed to be “an XML application that represents the next generation of forms for the Web”.

There was once going to be an XForms module for XHMTL 2.0 but that version of XTHML has now been retired.

Nevertheless, in October 2009 XForms 1.1 became an official W3C Recommendation so there's still some life in it. For further details read the XForms Wikipedia entry.