Pseudo‑elements are most helpful when we use them with intention and restraint.
Here are a few quiet, real‑world patterns that show how they help us shape content and decoration without adding extra markup.

Sometimes we want to hint that a link leads somewhere external.
We can do that without changing the HTML.

a.external::before {
  content: "↗ ";
  color: #666;
}

This adds a gentle marker — nothing loud, just a small cue.

We can use ::after to add a subtle divider between items.

nav a::after {
  content: " · ";
  color: #aaa;
}
 
nav a:last-child::after {
  content: "";
}

A quiet rhythm appears between links, and the HTML stays clean.

A classic typographic gesture, done without extra markup.

p.intro::first-letter {
  font-size: 200%;
  font-weight: bold;
  float: left;
  line-height: 1;
  padding-right: 0.2em;
}

This gives the opening paragraph a sense of presence.

A small detail that makes the page feel cared for.

::selection {
  background: #ffe8a3;
}

The reader notices this only when they need it.

Sometimes a button needs a small hint — a prefix, a suffix, a whisper of context.

button.save::after {
  content: " ✓";
  color: #4a8f4a;
}

The checkmark appears only visually; the HTML remains semantic.

We can add decorative quotation marks without wrapping the text in extra elements.

blockquote::before {
  content: "“";
  font-size: 2rem;
  color: #ccc;
  position: absolute;
  left: -0.5rem;
  top: -0.2rem;
}

A quiet typographic flourish.

During layout work, it’s helpful to see which elements are empty.

div:empty::before {
  content: "∅";
  color: #c00;
  font-size: 0.8rem;
}

This is a temporary helper — a gentle debugging tool.

Each example shows a small, intentional use of pseudo‑elements:

• no extra markup
• no unnecessary complexity
• just enough styling to express meaning
• quiet, structural patterns that age well

They reinforce the idea that pseudo‑elements are best used as light touches,
not heavy machinery.

• Suggested Next Reading: Combining Pseudo‑classes and Pseudo‑elements

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←