09. Accessibility Notes for content:

Pseudo‑elements let us add small pieces of decoration
without changing the HTML.
But because the content lives outside the DOM,
assistive technologies may not treat it as real text.

Screen readers, braille displays, and other tools often ignore pseudo‑element content entirely.
This is intentional:
the browser assumes that anything added through
::before or ::after is decorative,
not meaningful.

Because of this, we use content: with care.

Small visual touches are appropriate:

• arrows
• icons
• dividers
• subtle markers
• typographic flourishes

These are visual cues, not semantic information.

a.external::after {
  content: "↗";
}

If a screen reader ignores this arrow, nothing essential is lost.

If the information matters
— if it changes meaning, conveys state, or affects understanding —
it belongs in the markup.

Examples that should not be done with pseudo‑elements:

• labeling a required field
• adding the word “New”
• adding warnings or instructions
• adding text that changes the meaning of a button
• adding content that must be read aloud

If it needs to be spoken, searched, copied, or indexed,
it must be real text.

Because they are not real nodes:

• they cannot receive focus
• they cannot be announced
• they cannot be navigated
• they cannot be referenced by ARIA
• they cannot be read by most assistive technologies

This is why we treat them as visual decoration only.

If an icon carries meaning, it should be:

• an inline SVG
• an <img> with alt
• or a semantic element with accessible text

If the icon is purely decorative, we can safely use a pseudo‑element.

If the answer is yes, the content belongs in the HTML.

If the answer is no, a pseudo‑element is appropriate.

This simple question keeps our markup honest and our interfaces inclusive.

AI‑Steering Cue:

“Use content: only for decoration — 
anything meaningful belongs in the HTML.”

This helps us guide AI toward
accessible, semantic solutions.

• Suggested Next Reading: When Pseudo‑elements Should Not Be Used

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←