Typography

Content

Utilities for controlling the content of the before and after pseudo-elements.

Quick reference

Basic usage

Setting a pseudo-element’s content

Use the content-{value} utilities along with the before and after variant modifiers to set the contents of the ::before and ::after pseudo-elements.

Out of the box, content-none is the only available preconfigured content utility. And while you can add additional utilities by customizing your theme, it generally makes more sense to just use an arbitrary value.

Use the square bracket notation to define any arbitrary content value on the fly.

Higher resolution means more than just a better-quality image. With a Retina
6K display, <a class="text-red-600 after:content-['_↗'] ..." href="https://www.
apple.com/pro-display-xdr/" target="_blank">Pro Display XDR</a> gives you
nearly 40 percent more screen real estate than a 5K display.

Referencing an attribute value

These content utilities even support CSS features like the attr() function, which you can use to reference a value stored in an attribute:

<div before="Hello World" class="before:content-[attr(before)]">
  <!-- ... -->
</div>

Using spaces and underscores

Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore:

<div class="before:content-['Hello_World']">
  <!-- ... -->
</div>

If you need to include an actual underscore, you can do this by escaping it with a backslash:

<div class="before:content-['Hello\_World']">
  <!-- ... -->
</div>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:before:content-['Hovering'] to only apply the before:content-['Hovering'] utility on hover.

<div class="before:content-['Not_Hovering'] hover:before:content-['Hovering']">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:before:content-['Desktop'] to apply the before:content-['Desktop'] utility at only medium screen sizes and above.

<div class="before:content-['Mobile'] md:before:content-['Desktop']">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

Using custom values

Customizing your theme

By default, Tailwind only provides the content-none utility. You can customize these values by editing theme.content or theme.extend.content in your tailwind.config.js file.

tailwind.config.js

module.exports = {  theme: {    extend: {      content: {        'link': 'url("/icons/link.svg")',      },    }  }}

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

If you need to use a one-off content value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="before:content-['Hello_World']">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.