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 :first-line 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 <p> element according to the style in the :first-line 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:

:first-letter[]

The :first-letter 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 float is none)
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;
}

<p class="article">A paragraph in an article with the first letter red.</p>

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 :before pseudo-element can be used to insert some content before the content of an element. The following example inserts an image before each <h1> element:

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

:after[]

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

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

Pseudo-elements[]

Below is a chart which lists the pseudo-elements:

Pseudo-element	Description
`:after`	Adds content after an element.
`:before`	Adds content before an element.
`:first-letter`	Adds a style to the first character of text.
`:first-line`	Adds a style to the first line of text.