suburban glory

A Blog in Suburban Glory:
Web Dev Ideas and Inspiration

A complete guide to CSS pseudo-elements

|| Category: CSS ||

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:

CSS 2.1 CSS 3.0
:after ::after
:before ::before
:first-letter ::first-letter
:first-line ::first-line

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.

Comments

Daniel Leal Freitas || Mon 19th Jul 2010

Sorry but your blog its impossible to read..the content its good but the layout hurts my eyes (to many bright colors)

Andy || Mon 19th Jul 2010

I toned the colours down a bit for you

Richard, Leeds Designer || Sun 21st Nov 2010

I'm less confident than you that we'll be able to stop thinking about IE7 any time soon.

It's only this year that I've confidently felt that we don't have to worry about IE6 (the fact Google gave up on it being the tipping point).

Which is a shame, because there's loads of brilliant stuff in CSS3 that I would like to start using.

Andy || Sun 21st Nov 2010

For a lot of fancy CSS3 stuff (and even CSS2.1) I just ignore IE7 now although there is usually a client-side script to help out with the legacy browsers

Isabelle || Wed 11th Jan 2012

I went to tons of links before this, what was I thinking?

You can add comments below.
Auto-paragraphing is enabled. Double newlines will be converted to paragraphs.

Allowed tags: a, abbr, acronym, b, blockquote, caption, cite, code, dd, del, dfn, div, dl, dt, em, i, ins, kbd, li, ol, p, pre, s, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.

If you wish add code examples then please do so between the following tags:

<pre><![CDATA[
Place code here
]]></pre>







mainland