Tailwind Content Cheatsheet
Master the content utility for ::before and ::after pseudo-elements.
Click examples to copy. Interactive demos included.
Content Utilities
Tailwind provides content utilities for controlling the content CSS property used with pseudo-elements. Click to copy.
Required Field Asterisks
Use after:content-['*'] to add a required field indicator.
Visual result:
<!-- Required field with asterisk -->
<label class="block mb-2">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 font-medium">
Email
</span>
<input
type="email"
required
class="mt-1 block w-full px-3 py-2 border rounded-lg"
placeholder="you@example.com"
/>
</label>External Link Icons
Add an external link indicator using after:content-['_\2197'] (Unicode for arrow).
Visual result:
<!-- External link with icon -->
<a
href="https://example.com"
target="_blank"
rel="noopener noreferrer"
class="text-primary hover:underline after:content-['_\2197'] after:text-xs"
>
Visit Example Site
</a>
<!-- Or using an SVG icon approach -->
<a
href="https://example.com"
target="_blank"
class="inline-flex items-center gap-1 text-primary hover:underline"
>
Visit Site
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>Quotation Marks
Add decorative quotation marks using Unicode characters: \201C (open) and \201D (close).
Visual result:
The only way to do great work is to love what you do.
As Steve Jobs said, Stay hungry, stay foolish.
<!-- Blockquote with decorative quotes --> <blockquote class="relative pl-6 italic text-lg text-base-content/80 before:content-['\201C'] before:absolute before:left-0 before:top-0 before:text-4xl before:text-primary before:font-serif before:leading-none"> The only way to do great work is to love what you do. </blockquote> <!-- Inline quote with quotes --> <q class="before:content-['\201C'] after:content-['\201D'] before:text-primary after:text-primary"> Stay hungry, stay foolish. </q>
Decorative Elements with Empty Content
Use content-[''] for decorative pseudo-elements that are styled but contain no text.
Visual result:
<!-- Decorative line before heading --> <h2 class="relative pl-6 text-2xl font-bold before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-4 before:h-1 before:bg-primary before:rounded-full"> Featured Products </h2> <!-- Decorative underline on hover --> <a class="relative inline-block text-primary after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-primary after:transition-all hover:after:w-full"> Learn More </a> <!-- Decorative background shape --> <div class="relative px-4 py-2 before:content-[''] before:absolute before:inset-0 before:bg-primary/10 before:rounded-lg before:-z-10 before:transform before:-rotate-1"> Highlighted text </div>
Dynamic Content from Data Attributes
Use content-[attr(data-*)] to display dynamic content from data attributes.
Visual result:
Hover to see tooltip
Badge from data-count
<!-- Tooltip using data attribute -->
<button
data-tooltip="Click to save"
class="relative px-4 py-2 bg-primary text-primary-content rounded-lg
before:content-[attr(data-tooltip)] before:absolute before:-top-10
before:left-1/2 before:-translate-x-1/2 before:px-2 before:py-1
before:bg-base-content before:text-base-100 before:text-xs
before:rounded before:opacity-0 before:transition-opacity
hover:before:opacity-100 before:whitespace-nowrap">
Save
</button>
<!-- Badge with count from data attribute -->
<span
data-count="5"
class="relative inline-flex items-center px-3 py-1 bg-base-200 rounded-full
after:content-[attr(data-count)] after:absolute after:-top-2 after:-right-2
after:w-5 after:h-5 after:bg-red-500 after:text-white after:text-xs
after:rounded-full after:flex after:items-center after:justify-center">
Notifications
</span>Using content-none
Use content-none to remove generated content conditionally or reset pseudo-elements.
Visual result:
"Required" text shows on mobile, hidden on desktop (resize to test)
<!-- Reset pseudo-element content conditionally --> <button class="before:content-['*'] before:mr-1 before:text-red-500 disabled:before:content-none disabled:opacity-50"> Required when enabled </button> <!-- Remove list markers --> <ul class="list-disc"> <li>Normal list item</li> <li class="before:content-none list-none">No marker on this item</li> <li>Normal list item</li> </ul> <!-- Clear content on responsive --> <span class="after:content-['_Required'] md:after:content-none"> Email </span>
Useful Content Patterns
Click any pattern to copy the classes. These are common use cases for the content utility.
Frequently Asked Questions
What does content-none do in Tailwind CSS?
The content-none class sets content: none on an element, which removes any generated content from ::before or ::after pseudo-elements. It's useful for resetting or conditionally hiding pseudo-element content based on states or breakpoints.
How do I add content to ::before and ::after in Tailwind?
Use the before: and after: variants with content-['your-text'] or content-[''] for empty content. For example, before:content-['*'] adds an asterisk before the element, and after:content-[''] creates an empty pseudo-element for styling.
Can I use dynamic content with Tailwind's content utility?
Yes! Use content-[attr(data-*)] to display the value of a data attribute. For example, content-[attr(data-tooltip)] will show the tooltip text stored in the data-tooltip attribute. This is great for tooltips, badges with counts, and other dynamic UI elements.
Why use content-[''] for empty content?
Empty content (content-['']) is required for decorative pseudo-elements that are styled with CSS but don't contain text. Without setting content, the ::before or ::after pseudo-element won't render. This is common for creating shapes, lines, decorative borders, and visual indicators.
How do I use special characters in content?
Use Unicode escape sequences like \201C for opening quote, \201D for closing quote, \2192 for right arrow, \2022 for bullet, etc. In Tailwind, write them as content-['\\201C'] (with escaped backslash in JSX) or content-['\201C'] in plain HTML.
Can I use content utility with responsive breakpoints?
Yes! You can combine content utilities with responsive prefixes. For example, after:content-['Required'] md:after:content-none will show 'Required' on mobile but hide it on medium screens and up.
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow