What Is CSS Pseudo-Element?

CSS pseudo-elements are used to style a specific part of the selected element(s), such as:

• Adding content before or after the content of an element;
• Styling the first letter or the first line of an element;
• Styling part of document highlighted by the user;
• etc.

Pseudo-elements are added to a selector in the following way:

selector::pseudo-element {
  /* ... */
}

As you can see, a CSS pseudo-element is preceded by double colon (::). This is to maintain a distinction from pseudo-classes which are preceded by a single colon (:).

Please note that you can only specify one pseudo-element per selector.

For example:

/* add colon to every <label> element having for attribute */
label[for]::after { content: ':'; }

/* style first line of every <p> element */
p::first-line { font-weight: bold; }

/* style selections made in the document */
::selection { color: white; background-color: blue; }