content

Ejemplos

Ejemplo básico

Usa la sintaxis content-[<value>], junto con las variantes before y after, para establecer el contenido de los pseudo-elementos ::before y ::after:

<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>

Referenciando el valor de un atributo

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

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

Usando espacios y guiones bajos

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

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

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

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

Usando una variable CSS

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

<p class="content-(--my-content)"></p>

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

Responsive design

Prefija una utilidad content con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.