Pseudo elements include :first-line, :first-letter, :before and :after. In the CSS specification, W3C define pseudo-elements like this:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document…

Mmm, now I don’t know about you but that description makes my head hurt. Let’s take a closer look at pseudo-elements and see how we can use them in our own projects.

A note on browser compatibility. The :first-line and :first-letter pseudo-elements are supported by IE6, IE7 and IE8. The :before and :after pseudo-elements are supported by IE8 but not by IE6 and IE7.

:first-line

You can use the :first-line pseudo-element to target the first line of a paragraph.

Usage Notes for :first-line

The target element must be defined as block-level, inline-block, table-caption or table-cell. You can use the following properties with the :first-line pseudo-element: font properties, color property, background properties, ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘vertical-align’, ‘text-transform’ and ‘line-height’.

Example 1

We have a paragraph with an ID of example1. Let’s use the :first-line pseudo-element to capitalize the first line.

p#example1:first-line { text-transform: uppercase }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris orci, commodo nec consectetur in, porttitor eget dolor. Proin quis odio ligula, at pellentesque tortor. Cras eget justo mauris. Nam porttitor dapibus tellus vel pellentesque.

Example 2

Here’s a paragraph with an ID of example2. Let’s use the :first-line pseudo-element to make the first line bold.

p#example2:first-line { font-weight:bold; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris orci, commodo nec consectetur in, porttitor eget dolor. Proin quis odio ligula, at pellentesque tortor. Cras eget justo mauris. Nam porttitor dapibus tellus vel pellentesque.

Example 3

And here’s a paragraph with an ID of example3. This time we’ll use multiple CSS properties to change the color and font of the first line.

p#example3:first-line {
color:#a00;
font-size:1.3em;
font-style:italic;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris orci, commodo nec consectetur in, porttitor eget dolor. Proin quis odio ligula, at pellentesque tortor. Cras eget justo mauris. Nam porttitor dapibus tellus vel pellentesque.

:first-letter

The :first-letter pseudo element allows you to target the first alphanumeric character. The main reason for using the :first-letter pseudo-element is to create drop caps and initial caps.

Usage Notes for :first-letter

The target element must be defined as block-level, inline-block, list-item, table-caption or table-cell. These are the properties that apply to :first-letter pseudo-elements: font properties, ‘text-decoration’, ‘text-transform’, ‘letter-spacing’, ‘word-spacing’ (when appropriate), ‘line-height’, ‘float’, ‘vertical-align’ (only if ‘float’ is ‘none’), margin properties, padding properties, border properties, color property, background properties.

Example 4

Let’s use the :first-letter pseudo element to add a large capital to the following paragraph.

p#example4:first-letter {
font-size:3em;
font-weight:bold;
line-height:1;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris orci, commodo nec consectetur in, porttitor eget dolor. Proin quis odio ligula, at pellentesque tortor. Cras eget justo mauris. Nam porttitor dapibus tellus vel pellentesque.

Example 5

And we can easily create a drop cap by adding float:left to the CSS properties.

p#example5:first-letter {
font-size:4em;
font-weight:bold;
float:left;
padding:0.15em 5px 0px 0;
line-height:1;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris orci, commodo nec consectetur in, porttitor eget dolor. Proin quis odio ligula, at pellentesque tortor. Cras eget justo mauris. Nam porttitor dapibus tellus vel pellentesque.

:before and :after

The :before and :after pseudo-elements allow you to insert content before or after the target element. The ‘content’ property is the key to working with :before and :after. Let’s take a look at an example to see how this works.

Example 6

Let’s style the following paragraph using the :before and :after pseudo-elements. We’ll add “***” to the beginning and end of the paragraph.

p#example6{
font-size:0.8em;
font-family:Verdana,Arial,sans-serif;
line-height:1.2;padding:10px;border:#ccc 3px dotted;
}
p#example6:before { content:"*** "; }
p#example6:after { content:" ***";}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris orci, commodo nec consectetur in, porttitor eget dolor. Proin quis odio ligula, at pellentesque tortor. Cras eget justo mauris. Nam porttitor dapibus tellus vel pellentesque.

Conclusion

Hopefully that’s made things a little clearer and you can start to use CSS Pseudo-Elements in your own work.

A better understanding of which CSS styles take precedence can lead to less frustration with css, cleaner code, and more organized css so let’s look at three things that control which css rule applies to a given html element…