Content

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
  className="text-blue-600 **after:content-['_↗']** ..."
  dark-className="text-sky-400 **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" className="before:content-[attr(before)]">
  <!-- ... -->
</div>

Using spaces and underscores

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

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

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

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