Contenidos · Texto
Text decoration (decoración de texto)
Controla el estilo y el grosor de subrayados y tachados sin modificar bordes ni outlines.
Cinco estilos
Desde solid hasta wavy, exclusivamente para texto.
Diez grosores
.decoration-1 a .decoration-10 equivalen a valores de 1px a 10px.
Responsabilidad única
.decoration-* nunca altera border ni outline.
Código + resultado
Compara estilos de decoración
Selecciona un estilo para aplicarlo sobre el mismo texto subrayado.
Texto de ejemplo
<p class="underline decoration-solid decoration-3">
Texto con subrayado sólido
</p>
<p class="underline decoration-dashed decoration-3">
Texto con subrayado segmentado
</p>
<p class="underline decoration-dotted decoration-4">
Texto con subrayado punteado
</p>
<p class="underline decoration-double decoration-4">
Texto con subrayado doble
</p>
<p class="underline decoration-wavy decoration-3">
Texto con subrayado ondulado
</p>
Escala disponible
Grosores de decoración
Las clases .decoration-{nivel} controlan únicamente text-decoration-thickness, desde 1px hasta 10px.
.decoration-1
1px
.decoration-2
2px
.decoration-3
3px
.decoration-4
4px
.decoration-5
5px
.decoration-6
6px
.decoration-7
7px
.decoration-8
8px
.decoration-9
9px
.decoration-10
10px
Referencia
Clases disponibles
Todas estas utilidades afectan exclusivamente propiedades de decoración de texto.
| Clase | Valor | Propiedad | Resultado |
|---|---|---|---|
.decoration-solid | solid | text-decoration-style | Trazo continuo. |
.decoration-dashed | dashed | text-decoration-style | Trazo segmentado. |
.decoration-dotted | dotted | text-decoration-style | Trazo punteado. |
.decoration-double | double | text-decoration-style | Trazo doble; necesita suficiente grosor para distinguirse. |
.decoration-wavy | wavy | text-decoration-style | Trazo ondulado. |
.decoration-{1…10} | 1px…10px | text-decoration-thickness | Controla el grosor de la decoración. |
.border-solid, .border-dashed y .border-{0…10}. Las clases .decoration-* no modifican bordes ni outlines.Recomendaciones
Buenas prácticas con decoraciones
Activa la línea
Usa .underline o .line-through antes de definir estilo y grosor.
Declara la intención
Combina una clase de estilo y otra de grosor cuando el diseño requiera ambos controles.
Reserva double
Usa al menos 3px para que el trazo doble pueda distinguirse correctamente.
Separa contextos
Usa .border-* para cajas; no emplees decoraciones de texto como sustituto de un borde.