CSS Pseudo-elements

A pseudo-class styles an element in a special state. A pseudo-element goes one step further: it styles a part of an element — the first letter, the first line, or a piece of content that does not even exist in your HTML. It is written with two colons, like ::before, to tell it apart from a pseudo-class.

Diagram — see how it fits together

Pseudo-elements are how designers add small decorations without extra empty tags: a big opening quote before a quote, a coloured first letter at the start of a story, a custom bullet in front of a list item. The HTML stays clean, and the CSS does the decorating.

Before and after — add content with CSS

::before inserts something at the very start of an element, and ::after inserts something at the very end. The one rule you must never forget: they do nothing without the content property. Even an empty content: "" is needed, or the pseudo-element simply does not appear.

.quote::before {
  content: "\201C";
  color: orange;
  font-size: 40px;
}
.quote::after {
  content: "\201D";
  color: orange;
  font-size: 40px;
}

First-line and first-letter — the start of a story

::first-line styles only the first line of a paragraph — a classic way to open an article in bold. ::first-letter styles only the first letter, which is how books and newspapers make a big decorative drop cap. Both work only on block-level elements, like a paragraph.

.story::first-letter {
  font-size: 48px;
  color: red;
  font-weight: bold;
}
.story::first-line {
  font-weight: bold;
}

Selection — the highlight colour

When a visitor drags the mouse over text to select it, the browser highlights it — usually in blue. ::selection lets you choose that highlight colour yourself, so the selection matches your site's colours.

::selection {
  background-color: yellow;
}

Marker — style the list bullet

::marker styles the bullet or number in front of a list item. You can change its colour and size without changing the text at all. It is a small detail, but coloured markers make a plain list look designed.

.points li::marker {
  color: green;
  font-size: 20px;
}

Common mistakes

• Writing ::before without the content property — the pseudo-element then never appears at all.
• Using one colon (:before) — it still works in old browsers, but the correct modern form uses two colons.
• Putting real content, like an important image, in ::before — it has no alternative text, so screen readers and search engines cannot see it.
• Using ::first-letter on an inline element like a <span> — it only works on block-level elements.
• Forgetting that ::selection styles the highlight itself, not the text colour — set color inside it too if the text becomes hard to read.

Remember

• Pseudo-elements use two colons; pseudo-classes use one.
• ::before and ::after need the content property, or they do not appear.
• ::first-line styles the first line; ::first-letter makes a drop cap — both need a block element.
• ::selection changes the colour of highlighted text; ::marker styles list bullets.
• Use pseudo-elements for decoration; keep real content in the HTML.

Example explained

• .quote::before { content: "\201C"; } — a big opening quote mark is added before the quote text. The code \201C is the opening double quote character.
• .quote::after { content: "\201D"; } — the matching closing quote mark is added after the quote text.
• .story::first-letter { font-size: 48px; color: #e11d48; } — the first letter of the story becomes a large red drop cap, like in a printed book.
• .story::first-line { font-weight: bold; } — the whole first line of the story is bold, so the opening sentence stands out.
• ::selection { background-color: #fde047; } — when the visitor selects any text on the page, the highlight is yellow instead of the browser's default blue.
• .points li::marker { color: #16a34a; font-size: 20px; } — the bullets in front of the list items turn green and a little bigger, without touching the list text.