text-decoration-line

Ejemplos

Subrayando texto

Usa la utilidad underline para agregar un subrayado al texto de un elemento:

<p class="underline">El rápido zorro marrón...</p>

Agregando una línea superior al texto

Usa la utilidad overline para agregar una línea superior al texto de un elemento:

<p class="overline">El rápido zorro marrón...</p>

Agregando una línea a través del texto

Usa la utilidad line-through para agregar una línea a través del texto de un elemento:

<p class="line-through">El rápido zorro marrón...</p>

Quitando una línea del texto

Usa la utilidad no-underline para quitar una línea del texto de un elemento:

<p class="no-underline">El rápido zorro marrón...</p>

Aplicando en hover

Prefija una utilidad text-decoration-line con una variante como hover:* para aplicar la utilidad solo en ese estado:

<p>El <a href="..." class="no-underline hover:underline ...">rápido zorro marrón</a> salta sobre el perro perezoso.</p>

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

Responsive design

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

<a class="no-underline md:underline ..." href="...">
  <!-- ... -->
</a>

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