CSS Pseudo-elements

While pseudo-classes let us style elements based on their state, pseudo-elements allow us to style specific parts of an element or even insert extra content without changing the HTML.

Pseudo-elements are powerful because they help us:

Add decorative content without extra HTML.
Style specific parts of text (like first letter, selection, etc.).
Improve readability, accessibility, and UI design.
Keep HTML clean while making CSS more expressive.

Common CSS Pseudo-elements

::before – Insert Content Before an Element

The ::before pseudo-element is used to insert content before an element’s content. This is commonly used for adding icons, quotes, or decorations without extra HTML.

h1::before {
  content: "★ ";
  color: gold;
}

::after – Insert Content After an Element

The ::after pseudo-element inserts content after an element’s content. Often used for adding visual indicators, decorative lines, or helper text.

a::after {
  content: " ?";
  color: gray;
}

::marker – Style List Markers

The ::marker pseudo-element lets you style the bullet points or numbers in lists (<ul> and <ol>). This gives designers full control over how list markers appear.

li::marker {
  color: red;
  font-size: 18px;
}

::selection – Style Selected Text

The ::selection pseudo-element allows you to style the portion of text a user highlights with their mouse or keyboard.

p::selection {
  background: yellow;
  color: black;
}

Flow of CSS Pseudo-elements