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

CSS Pseudo-elements with Examples