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; }

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.