Pseudo-elements and generated content

before and after

Tailwind supports pseudo-element variants such as before: and after:. They are useful for decorative indicators, labels and small visual details.

Content is required

Pseudo-elements need content to appear. Tailwind can generate content from a literal string, attribute or CSS custom property.

Do not put meaningful content only in CSS

Important information should exist in semantic HTML so it is available to assistive technology and other user agents. Generated content is best for decoration or redundant visual cues.