Pseudo-elements and decorative content
Pseudo-element variants such as before: and after: can create decorative shapes, indicators, and overlays without extra markup. They are useful for nonessential decoration, not for content that users must understand or interact with. A pseudo-element usually needs a content value, which Tailwind's supported syntax can provide.
Do not use generated content as a replacement for meaningful DOM text, form labels, or accessible names. Keep decorative elements hidden from assistive technology when appropriate.
Decorative status marker
<span class="inline-flex items-center gap-2 text-sm font-medium text-emerald-800">
<span class="relative flex size-2" aria-hidden="true">
<span class="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-60 motion-reduce:animate-none"></span>
<span class="relative inline-flex size-2 rounded-full bg-emerald-600"></span>
</span>
Live status
</span>💡 The marker is decorative and hidden from assistive technology. The text “Live status” communicates the state independently. The ping animation is disabled for reduced-motion users; for critical status, consider avoiding continuous animation altogether.
Key Takeaways
- Use pseudo-elements for decoration, not essential content.
- Respect reduced-motion preferences.
- Always communicate important state through text or semantics as well as animation.