Content - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "content"; export const description = "Utilities for controlling the content of the before and after pseudo-elements.";

<ApiTable rows={[ ["content-[<value>]", "content: <value>;"], ["content-(<custom-property>)", "content: var(<custom-property>);"], ["content-none", "content: none;"], ]} />

Examples

Basic example

Use the content-[<value>] syntax, along with the before and after variants, to set the contents of the ::before and ::after pseudo-elements:

<Figure> <Example> { <div className="mx-auto w-full max-w-md text-gray-500 dark:text-gray-400"> Higher resolution means more than just a better-quality image. With a Retina 6K display,{" "} <a href="https://www.apple.com/pro-display-xdr/" className="font-medium text-blue-600 after:text-sm after:font-bold after:content-['_↗'] dark:text-sky-400" target="_blank" > Pro Display XDR </a>{" "} gives you nearly 40 percent more screen real estate than a 5K display. </div> } </Example>

html

<!-- [!code classes:after:content-['_↗']] -->
<!-- prettier-ignore -->
<p>Higher resolution means more than just a better-quality image. With a
Retina 6K display, <a class="text-blue-600 after:content-['_↗']" href="...">
Pro Display XDR</a> gives you nearly 40 percent more screen real estate than
a 5K display.</p>

</Figure>

Referencing an attribute value

Use the content-[attr(<name>)] syntax to reference a value stored in an attribute using the attr() CSS function:

html

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

</Figure>

Using spaces and underscores

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

html

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

</Figure>

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

html

<!-- [!code classes:before:content-['Hello\_World']] -->
<p class="before:content-['Hello\_World']"></p>

</Figure>

Using a CSS variable

Use the <code>content-{'(<custom-property>)'}</code> syntax to control the contents of the ::before and ::after pseudo-elements using a CSS variable:

html

<!-- [!code classes:content-(--my-content)] -->
<p class="content-(--my-content)"></p>

This is just a shorthand for <code>content-{'[var(<custom-property>)]'}</code> that adds the var() function for you automatically.

Responsive design

html

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

</ResponsiveDesign>