content

Ejemplos

Ejemplo básico

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

<p>Una mayor resolución significa más que solo una imagen de mejor calidad. Con una pantalla Retina 6K,<a class="text-blue-600 after:content-['_↗']" href="...">Pro Display XDR</a> te brinda casi un 40 por cientomás de espacio de pantalla que una pantalla 5K.</p>

Referenciar el valor de un atributo

Utiliza la sintaxis content-[attr(<name>)] para hacer referencia a un valor almacenado en un atributo utilizando la función CSS attr():

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

Usar espacios y guiones bajos

Dado que el espacio en blanco denota el final de una clase en HTML, reemplaza cualquier espacio en un valor arbitrario con un guion bajo:

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

Si necesitas incluir un guion bajo real, puedes hacerlo escapándolo con una barra invertida:

<p class="before:content-['Hola\_Mundo']"></p>

Usar una variable CSS

Utiliza la sintaxis content-(<custom-property>) para controlar el contenido de los pseudo-elementos ::before y ::after utilizando una variable CSS:

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

Esta es solo una abreviatura de content-[var(<custom-property>)] que agrega la función var() automáticamente por ti.

Diseño responsivo

Antepone a la utilidad content el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<p class="before:content-['Móvil'] md:before:content-['Escritorio'] ..."></p>

Obtén más información sobre el uso de variantes en la documentación de variantes.