06. Pseudo‑elements — Styling Parts of an Element

Pseudo‑elements let us style pieces of an element —
fragments that do not exist as separate nodes in the DOM.
They give us a way to reach inside an element and work with its internal structure, without adding extra markup.

Where state selectors describe conditions,
pseudo‑elements describe sub‑parts.

They help us shape content, decoration,
and layout with precision and restraint.

A pseudo‑element represents a virtual part of an element —
something the browser exposes for styling even though it does not appear in the HTML.

We write pseudo‑elements using a double colon (::) followed by the name of the part we want to style.

Examples:

• ::before
• ::after
• ::first-line
• ::first-letter
• ::selection

These are not elements in the DOM.
They are conceptual surfaces the browser gives us.

These are the most widely used pseudo‑elements.
They let us insert small pieces of content or decoration.

button::before {
  content: "→ ";
}

We often use them for:

• icons
• labels
• decorative markers
• small structural hints

They help us keep the HTML clean
while still expressing meaning visually.

Reminder:
content: is required
— without it, the pseudo‑element does not appear.

p::first-line {
  font-weight: bold;
}

This selector styles only the first line of text as it appears in the layout.
It responds to line wrapping, not to the HTML structure.

p::first-letter {
  font-size: 200%;
}

This is often used for drop caps or subtle typographic emphasis.

::selection {
  background: #ffe08a;
}

This lets us shape the experience of text selection — a small but meaningful detail.

Pseudo‑elements let us:

• add decoration without adding markup
• express meaning visually
• shape typography
• create subtle UI cues
• keep HTML clean and intentional

They give us a way to work with the inside of an element while keeping the DOM simple.

They also help us guide AI:

“Use a pseudo‑element — 
we want to style a part of the element, 
not the whole thing.”

We reach for pseudo‑elements when:

• we need small, decorative content
• we want to avoid extra markup
• we want to style a typographic fragment
• we want to add icons or markers
• we want to shape selection or emphasis

They are especially helpful in component design,
where clarity and minimal markup matter.

We avoid pseudo‑elements when:

• the content is meaningful (it belongs in the HTML)
• the decoration is too complex
• the structure needs to be accessible to assistive technologies
• the element already has too many responsibilities

Pseudo‑elements are best used with intention and restraint.

AI‑Steering Cue:

“Use a pseudo‑element when we want to style a part of the element 
or add small decorative content without changing the HTML.”

This helps us guide AI toward clean, semantic markup.

• Suggested Next Reading: Pseudo‑elements in Practice (Simple Examples)

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←