Table of Contents
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.
1. Decorative content is safe
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.
2. Meaningful content must be in the HTML
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.
3. Pseudo‑elements do not participate in the accessibility tree
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.
4. Icons added with ''content:'' should be decorative
If an icon carries meaning, it should be:
- an inline SVG
- an
<img>withalt - or a semantic element with accessible text
If the icon is purely decorative, we can safely use a pseudo‑element.
5. When in doubt, ask: “Would a screen reader user miss something important?”
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