CSS Pseudo Elements

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

Grammar

Syntax of pseudo-element:

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 set a special style to the first line of text.

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

Example

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

 Try It! 

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

Note: The following attributes 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 set a special style to the first letter of the text:

Example

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

 Try It! 

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

Note: The following attributes 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 turn the first letter of all paragraphs whose class is article to red.

Multiple Pseudo-Elements

It can be used in combination with multiple pseudo-elements.

In the example below, the first letter of the paragraph will be displayed in red and its font size is xx-large. The rest of the text in the first line will be blue and displayed in small capital letters.

The rest of the text in the paragraph 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;
}

 Try It! 

CSS - :before Pseudo Element

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

The following example inserts a picture before each <h1> element:

Example

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

 Try It! 

CSS - :after Pseudo Element

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

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

Example

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

 Try It! 

All CSS Pseudo-Classes/Elements