08. Combining Pseudo‑classes and Pseudo‑elements

Pseudo‑classes and pseudo‑elements complement each other.
A pseudo‑class tells us when an element is in a particular condition.
A pseudo‑element tells us which part of the element we want to style.

When we combine them, we can style a specific part of an element only when it enters a certain state.

This gives us a precise, expressive way to shape interaction and typography without adding extra markup.

A quiet, common pattern:
we add a small marker, but only when the user hovers.

a:hover::after {
  content: " →";
  color: #666;
}

The arrow appears only during the hover moment — a gentle cue, not a permanent decoration.

We can emphasize the first line of a paragraph when it receives focus
(useful in editable regions).

p:focus::first-line {
  background: #fff4c2;
}

The emphasis appears only when the element is active.

A classic pattern: the visual marker changes with the state.

input[type="checkbox"]:checked::after {
  content: "✓";
  color: #4a8f4a;
}

The checkmark is not in the HTML — it appears only when the checkbox is checked.

A subtle typographic gesture tied to link history.

a:visited::first-letter {
  opacity: 0.7;
}

The first letter becomes slightly softer after the link has been visited.

We can use :placeholder-shown to style a pseudo‑element that hints at structure.

input:placeholder-shown::before {
  content: "⟶";
  color: #bbb;
  margin-right: 0.3em;
}

The marker appears only when the field has no user input.

We can combine structural and interaction states with a pseudo‑element.

li:last-child:hover::after {
  content: " ·";
  color: #aaa;
}

A small divider appears only when the last item is hovered
— a tiny moment of emphasis.

Combining pseudo‑classes and pseudo‑elements lets us:

• respond to conditions
• style parts of an element
• keep HTML clean
• express meaning visually
• create subtle, intentional interactions
• avoid unnecessary JavaScript or extra markup

It’s a quiet, powerful technique
that helps us shape behavior and typography with precision.

AI‑Steering Cue:

“Combine a pseudo‑class with a pseudo‑element — 
we want to style this part of the element only when 
it enters this condition.”

This helps us guide AI toward clean,
semantic solutions that respect both structure and state.

• Suggested Next Reading: Accessibility Notes for content:

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←