CSS Pseudo-elements

CSS pseudo-elements are used to add special effects to some selectors.

Syntax

The syntax of pseudo-elements:

selector:pseudo-element {property:value;}

CSS classes can also use pseudo-elements:

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

:first-line Pseudo-element

The "first-line" pseudo-element is used to apply special styles to the first line of text.

In the following example, the browser will format the first line of text within a p element according to the styles in the "first-line" pseudo-element:

Example

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

Note: The "first-line" pseudo-element can only be used on block-level elements.

Note: The following properties can be applied to the "first-line" pseudo-element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

:first-letter Pseudo-element

The "first-letter" pseudo-element is used to apply special styles to the first letter of text:

Example

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

Note: The "first-letter" pseudo-element can only be used on block-level elements.

Note: The following properties can be applied to the "first-letter" 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 and CSS Classes

Pseudo-elements can be combined with CSS classes:

p.article:first-letter {color:#ff0000;}

<p class="article">Article paragraph</p>

The above example will make the first letter of all paragraphs with the class "article" red.

Multiple Pseudo-elements

Multiple pseudo-elements can be combined.

In the following example, the first letter of the paragraph will be red with a font size of xx-large. The rest of the first line will be blue and displayed in small-caps.

The rest of the paragraph text will be displayed in the default font size and color:

Example

p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}
p:first-line 
{
    color:#0000ff;
    font-variant:small-caps;
}

CSS - :before Pseudo-element

The ":before" pseudo-element can insert content before the content of an element.

The following example inserts an image before each <h1> element:

Example

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

CSS - :after Pseudo-element

The ":after" pseudo-element can insert content after the content of an element.

The following example inserts an image after each <h1> element:

Example

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

All CSS Pseudo-classes/Elements