Learn to Use CSS Pseudo Elements for Styling Parts of HTML Elements

Defining pseudo elements

• You can create CSS pseudo elements by adding a keyword to regular selectors.
• Pseudo elements differ from pseudo classes because they use double colons (::) before the keyword.
• Another difference is that pseudo elements style specific parts of HTML elements, not their states.

Using pseudo elements

CSS pseudo elements have two colons before the keyword defining which part of the element to style or where to add new content.

Pseudo elements create items that are not in the DOM tree but are visible on websites.

Follow this syntax to create CSS pseudo elements:

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

:: or :

The CSS pseudo elements started using double colons since CSS3 to make a clear distinction between them and pseudo classes.

However, Internet Explorer 8 supports only the single-colon approach. It means that for the best browser-compatibility, you should use only one colon.

Note: if full IE support is not relevant to your website, you can use the new format of two colons.

Pseudo selector or pseudo element?

There are differences between pseudo selectors and pseudo elements:

• Pseudo elements usually add something new to the website (content that does not exist in the DOM tree).
• CSS pseudo selectors select the content that already exists in the DOM tree (for instance, the children of a specific parent).

Common pseudo elements

::before

The CSS ::before pseudo element inserts content before any element without the use of HTML. The added content does not appear in the DOM tree but shows up at the actual page.

This example adds an image before the <a> element:

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

CSS ::before can add the following content:

• Images
• Strings
• Counters
• Nothing

Note: the ::before usually adds new content before the content property.

::after

CSS ::after inserts content after the specified elements. It follows the same rules as ::before, but the position of added elements differs.

This example adds an image after the <a> element:

a::after {   
    content: url(doggo.png);  
}

::first-line

The pseudo element ::first-line is for adding special styles to the first line of a text. You can change the colors, background colors, fonts, set letters to uppercase, and many more properties.

The example below affects the first line in the <div> element:

div::first-line { 
    color: limegreen;   
}

Note: this pseudo-element only applies to block-level elements.

Remember that sizes of browser windows, fonts, and spacing affect the way ::first-line works. Also, CSS handles the added pseudo element as a child of the specified element.

::first-letter

The pseudo element ::first-letter is for adding special styles to the first letters of the first line of block-level elements.

The example below affects the first letter of <div> element:

div::first-letter {
    color: green;
}

Note: if you apply both ::first-line and ::first-letter, both styles will apply. When the styles conflict, the ::first-letter wins and styles the first letter.

::selection

The pseudo-element ::selection is for styling the text that users select with their cursor.

Warning: the ::selection pseudo element must have two colons even though other elements work with only one.

This example makes the selected text green in a blue background:

::selection {
    color: blue;    
    background: green;
}

::selection accepts these properties:

• color
• background
• text-shadow

Adding multiple pseudo elements

You can combine several CSS pseudo-elements for one element. However, you cannot use CSS ::after two times or ::before two times.

In the example below, the first letter of <div> is green and has x-large font size. The first line of <div> element is red and has small capital letters.

div::first-letter {
    color: chocolate;
    font-size: x-large;
}

div::first-line {
    color: rgb(255, 0, 191);
    font-variant: small-caps;
} 

Cheat sheet of pseudo elements

CSS pseudo elements: useful tips

• Before using the experimental pseudo elements, check their browser-support.
• To use multiple pseudo elements on one selector, you need to write them on that selector in different lines.