Pseudo-Elements

CSS pseudo-elements are used to add special effects to some CSS selectors. Pseudo-elements have a colon in front of their name.

The following is the syntax used to write pseudo-elements:

selector:pseudo-element { property:value; }

A class selector may also be used:

selector.class:pseudo-element { property:value; }

: first-line
The  pseudo-element is used to add a special style to the first line of a text.

In the following example the browser formats the first line of text in a  element according to the style in the   pseudo-element (where the browser breaks the line, depends on the size of the browser window):

p:first-line { color:#ff0000; font-variant:small-caps; }

This pseudo-element only works with block-level elements. The following are properties that apply to this pseudo-element:
 * font properties
 * color properties
 * background properties
 * word-spacing
 * letter-spacing
 * text-decoration
 * vertical-align
 * text-transform
 * line-height
 * clear

: first-letter
The  pseudo-element is used to add a special style to the first letter of a text:

p:first-letter { color:#ff0000; font-size:xx-large; }

This pseudo-element can only be used with block-level elements. The following properties apply to this pseudo-element:


 * font properties
 * color properties
 * background properties
 * margin properties
 * padding properties
 * border properties
 * text-decoration
 * vertical-align (only if  is  )
 * text-transform
 * line-height
 * float
 * clear

Pseudo-elements used with class selectors
Pseudo-elements can be combined with CSS class selectors:

p.article:first-letter { color:#ff0000; } A paragraph in an article with the first letter red.

Multiple pseudo-elements
Several pseudo-elements can also be combined. In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color.

p:first-letter { color:#ff0000; font-size:xx-large; }

p:first-line { color:#0000ff; font-variant:small-caps; }

: before
The  pseudo-element can be used to insert some content before the content of an element. The following example inserts an image before each  element:

h1:before { content:url(smiley.gif); }

: after
The  pseudo-element can be used to insert some content after the content of an element. The following example inserts an image after each  element:

h1:after { content:url(smiley.gif); }

Pseudo-elements
Below is a chart which lists the pseudo-elements: