# Text decoration (decoración de texto)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/line-types.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Contenidos · Texto

Controla el estilo y el grosor de subrayados y tachados sin modificar bordes ni outlines.

v2.0

—

## Cinco estilos
Desde `solid` hasta `wavy`, exclusivamente para texto.

10

## Diez grosores
`.decoration-1` a `.decoration-10` equivalen a valores de 1px a 10px.

Aa

## Responsabilidad única
`.decoration-*` nunca altera `border` ni `outline`.

i

## Composición requerida
Activa la decoración con `.underline` o `.line-through` y luego combina estilo y grosor: `.decoration-dashed .decoration-2`.

Código + resultado

## Compara estilos de decoración

Selecciona un estilo para aplicarlo sobre el mismo texto subrayado.

HTML

Resultado aplicado  3px · solid

Decoración real

Texto de ejemplo

.underline activa la línea; .decoration-solid y .decoration-3 controlan su estilo y grosor.

```html
<p class="underline decoration-solid decoration-3">
  Texto con subrayado sólido
</p>
```

.decoration-dashed produce un subrayado segmentado sin modificar los bordes del elemento.

```html
<p class="underline decoration-dashed decoration-3">
  Texto con subrayado segmentado
</p>
```

Un grosor mayor hace más evidente el patrón punteado.

```html
<p class="underline decoration-dotted decoration-4">
  Texto con subrayado punteado
</p>
```

.decoration-double necesita suficiente grosor para distinguir ambos trazos.

```html
<p class="underline decoration-double decoration-4">
  Texto con subrayado doble
</p>
```

.decoration-wavy controla el estilo; .underline activa la decoración.

```html
<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.

Aa
`.decoration-1`
1px

Aa
`.decoration-2`
2px

Aa
`.decoration-3`
3px

Aa
`.decoration-4`
4px

Aa
`.decoration-5`
5px

Aa
`.decoration-6`
6px

Aa
`.decoration-7`
7px

Aa
`.decoration-8`
8px

Aa
`.decoration-9`
9px

Aa
`.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. |

Separación de contextos  Para bordes usa `.border-solid`, `.border-dashed` y `.border-{0…10}`. Las clases `.decoration-*` no modifican bordes ni outlines.

Recomendaciones

## Buenas prácticas con decoraciones

01
### Activa la línea
Usa `.underline` o `.line-through` antes de definir estilo y grosor.

02
### Declara la intención
Combina una clase de estilo y otra de grosor cuando el diseño requiera ambos controles.

03
### Reserva double
Usa al menos 3px para que el trazo doble pueda distinguirse correctamente.

04
### Separa contextos
Usa `.border-*` para cajas; no emplees decoraciones de texto como sustituto de un borde.