text-decoration

text-decoration es la propiedad CSS que controla las líneas decorativas que acompañan al texto: el subrayado clásico de los vínculos, el tachado de precios rebajados, el sobrelineado en textos editoriales. Es un shorthand que agrupa cuatro propiedades longhand: text-decoration-line (el tipo de línea), text-decoration-style (el estilo visual de la línea), text-decoration-color (el color) y text-decoration-thickness (el grosor). En la mayoría de los casos, con declarar el shorthand alcanza.

La distinción más importante de text-decoration respecto a otras propiedades de texto es su comportamiento de herencia: text-decoration no se hereda. Sin embargo, tiene un comportamiento que puede confundirse con herencia: cuando se aplica a un elemento, la línea se extiende visualmente sobre los elementos hijos en línea que contiene, atravesándolos incluso si esos hijos tienen declarado text-decoration: none. Este comportamiento es intencional en la especificación CSS y es especialmente relevante con underline en los links: si un <a> tiene text-decoration: underline, el subrayado cruza también cualquier <strong> o <em> interno, aunque no se “herede” en el sentido de que los hijos puedan ver text-decoration en getComputedStyle.

El caso de uso más frecuente en CSS real no es agregar decoración sino quitarla: los navegadores aplican text-decoration: underline a los <a> por defecto, y en casi todo diseño moderno ese subrayado se elimina con CSS para controlarlo según el estado (hover, foco, activo). Para quitarlo hay que apuntar al <a> directamente — no alcanza con declararlo en un ancestro porque, como dijimos, no se hereda.

Cómo funciona

El navegador genera la línea decorativa como parte del rendering del texto, fuera del flujo del box model. La línea no agrega altura al elemento ni ocupa espacio vertical. El color por defecto de la línea es el currentColor del elemento (hereda el color), pero puede especificarse independientemente con text-decoration-color.

/* Los casos más comunes */
a              { text-decoration: none; }        /* quitar subrayado de links */
del, s          { text-decoration: line-through; } /* texto tachado */
.enfasis        { text-decoration: underline; }
.sobrelineado   { text-decoration: overline; }

/* Shorthand con todos los valores */
.enlace-especial {
  text-decoration: underline dotted #3b82f6 2px;
  /* line   style   color     thickness */
}

Sintaxis

/* Shorthand */
selector {
  text-decoration: <line> [<style>] [<color>] [<thickness>];
}

/* Longhands equivalentes */
selector {
  text-decoration-line:      underline | overline | line-through | none;
  text-decoration-style:     solid | dashed | dotted | double | wavy;
  text-decoration-color:     <color>;
  text-decoration-thickness: auto | from-font | <longitud> | <porcentaje>;
}

Valores de text-decoration-line

none — sin decoración

Quita cualquier línea decorativa. Es el valor que se usa para eliminar el subrayado por defecto de los <a>.

a { text-decoration: none; }

underline — subrayado

Dibuja una línea debajo del texto. Es el valor por defecto que los navegadores aplican a los <a>. También se usa en herramientas de edición para indicar texto insertado o para énfasis secundario.

.precio-nuevo { text-decoration: underline; }
abbr          { text-decoration: underline dotted; } /* convención semántica */

line-through — tachado

Dibuja una línea horizontal a través del texto. Indica texto eliminado o un precio rebajado.

del  { text-decoration: line-through; }
.old-price { text-decoration: line-through; color: #9ca3af; }

overline — sobrelineado

Dibuja una línea sobre el texto. Uso poco frecuente; aparece en algunos contextos editoriales o decorativos.

.citacion { text-decoration: overline; }

Combinación de valores

text-decoration-line acepta múltiples valores a la vez:

.especial { text-decoration: underline overline; }

Valores de text-decoration-style

abbr   { text-decoration: underline dotted; }         /* convención semántica */
.error { text-decoration: underline wavy red; }       /* estilo de corrector */
.edit  { text-decoration: underline double #3b82f6; }

Cuándo usar qué

Notas, gotchas e interacción

• text-decoration no se hereda, pero se propaga visualmente. Cuando un <a> tiene text-decoration: underline, la línea cruza también los <strong> o <em> internos. Ese comportamiento no es herencia: getComputedStyle en esos hijos mostrará none. Es la línea del padre extendiéndose visualmente. Para quitarla en un hijo, declarás text-decoration: none en ese hijo — pero la especificación dice que no está garantizado que funcione en todos los navegadores.
• Para quitar el subrayado de un <a>, apuntá directamente al <a>. Declarar text-decoration: none en un contenedor padre no tiene efecto porque la propiedad no se hereda. Siempre a { text-decoration: none; }.
• El color de la línea hereda de color por defecto. Cambiás el color del texto y la línea cambia también, a menos que especifiques text-decoration-color explícitamente.
• text-decoration: none sobrescribe el shorthand completo. Si declarás text-decoration: none, resetea también el estilo, color y grosor. Si solo querés quitar la línea pero mantener el color o grosor previo, usá text-decoration-line: none.
• Quitando el subrayado de links y accesibilidad. Si quitás el subrayado a los links, asegurate de que haya otro indicador visual (color distinto, peso, cursor) que diferencie el link del texto normal. Los links sin subrayado ni contraste de color son inaccesibles para usuarios con dificultades para distinguir colores.
• text-decoration-thickness y el efecto visual. Con un valor numérico como 2px o from-font, podés controlar el grosor de la línea. from-font usa la métrica que la fuente define, que suele verse mejor que un valor arbitrario.

Vigente / legacy

text-decoration como shorthand existe desde CSS1. Las longhands text-decoration-line, text-decoration-style y text-decoration-color se formalizaron en CSS Text Decoration Level 3. text-decoration-thickness y text-underline-offset son más recientes (Nivel 4) pero tienen buen soporte. No hay forma legacy.

Aprendelo en el recorrido

Esta propiedad se trabaja en el módulo Tipografía y texto, lección Decoración y transformación.