It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

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

Reading time 5 min
Published Nov 7, 2016
Updated Oct 14, 2019

TL;DR – CSS pseudo elements style specific portions of HTML elements such as first letters or lines of paragraphs.

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:

Example
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:

Example
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:

Example
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:

Example
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:

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

::selection accepts these properties:

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.

Example
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

Selector Description
::after Insert content after content of each of specified element
::before Insert content before content of each of specified element
::first-letter Selects the first letter of each of specified element
::first-line Selects the first line of each of specified element
::selection Selects the portion of element that is selected by the user
::slotted() Selects any element in a slot of an HTML template
::cue Selects WebVTT cues in a selected element
::backdrop Experimental. Selects the box that appears after elements enter full-screen mode
::grammar-error Experimental. Selects the part of the text that the user agent marks as grammatically incorrect
::marker Experimental. Selects the marker box of a list item, usually with a bullet or a number
::part() Experimental. Selects elements with a part attribute from the shadow tree
::placeholder Experimental. Selects the placeholder text of an <input> or <textarea>
::spelling-error Experimental. Selects the part of the text that the user agent marks as spelled incorrectly

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.