Text-decoration en CSS es la propiedad que permite añadir, eliminar y personalizar líneas decorativas en un texto, como subrayados, tachados o líneas superiores. Además de valores básicos como underline, none, overline y line-through, CSS permite controlar el color, grosor, estilo y separación de estas líneas.
Por ejemplo, para subrayar un texto basta con utilizar:
.texto {
text-decoration: underline;
}
Sin embargo, text-decoration ofrece bastante más. En esta guía veremos su sintaxis, todos sus valores principales y ejemplos prácticos para controlar los subrayados y otras decoraciones de texto con CSS.
Índice
- ¿Qué es text-decoration en CSS?
- Sintaxis de text-decoration
- Valores de text-decoration
- Cómo subrayar texto con CSS
- Cómo quitar el subrayado de un enlace con CSS
- Cómo cambiar el color del subrayado
- Cómo cambiar el grosor del subrayado
- Estilos de subrayado en CSS
- Cómo separar el subrayado del texto
- Propiedades de text-decoration
- Ejemplos prácticos de text-decoration
- Accesibilidad y buenas prácticas
- Compatibilidad con navegadores
- Preguntas frecuentes
¿Qué es text-decoration en CSS?
text-decoration es una propiedad abreviada o shorthand de CSS utilizada para establecer la apariencia de las líneas decorativas de un texto.
Su uso más conocido es el subrayado:
p {
text-decoration: underline;
}
Pero también permite tachar texto, colocar una línea sobre él y combinar la posición de la línea con su color, estilo y grosor.
Por ejemplo:
.ejemplo {
text-decoration: underline wavy #1742ff 2px;
}En este caso estamos creando un subrayado ondulado, azul y de 2 píxeles de grosor utilizando una única declaración.
La propiedad abreviada text-decoration permite definir conjuntamente text-decoration-line, text-decoration-color, text-decoration-style y text-decoration-thickness.
Sintaxis de text-decoration
La sintaxis puede ser muy sencilla:
text-decoration: underline;o combinar varios componentes:
text-decoration: underline solid red 2px;No es necesario especificarlos todos. Algunos ejemplos válidos son:
text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: underline red;
text-decoration: underline wavy;
text-decoration: underline wavy red;
text-decoration: underline solid #1742ff 2px;Esto hace que text-decoration sea especialmente práctica cuando queremos definir una decoración completa sin declarar varias propiedades CSS por separado.
Valores de text-decoration
Los valores más habituales determinan dónde aparecerá la línea decorativa.
| Valor | Resultado | Uso habitual |
|---|---|---|
none |
Sin decoración | Eliminar subrayados |
underline |
Línea debajo del texto | Subrayados y enlaces |
overline |
Línea encima del texto | Efectos tipográficos |
line-through |
Línea atravesando el texto | Texto tachado o precios anteriores |
text-decoration: none
Elimina las decoraciones de texto existentes:
a {
text-decoration: none;
}
text-decoration: underline
Añade una línea debajo del texto:
.subrayado {
text-decoration: underline;
}
text-decoration: overline
Coloca la línea encima del texto:
.linea-superior {
text-decoration: overline;
}
text-decoration: line-through
Atraviesa el texto con una línea:
.tachado {
text-decoration: line-through;
}Es frecuente encontrarlo en interfaces donde se muestra, por ejemplo, un valor anterior junto a uno nuevo.
Cómo subrayar texto con CSS
La forma más sencilla de subrayar texto con CSS consiste en utilizar text-decoration: underline:
.texto-subrayado {
text-decoration: underline;
}Después podemos personalizar el resultado utilizando otras propiedades:
.texto-subrayado {
text-decoration-line: underline;
text-decoration-color: #1742ff;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}También podemos expresarlo de forma más compacta:
.texto-subrayado {
text-decoration: underline solid #1742ff 2px;
text-underline-offset: 4px;
}Esta segunda técnica resulta especialmente útil cuando queremos que el subrayado forme parte del diseño visual de una web y no utilizar simplemente el estilo predeterminado del navegador.
Cómo quitar el subrayado de un enlace con CSS
Para quitar el subrayado de un enlace con CSS se utiliza text-decoration: none sobre el elemento <a>:
a {
text-decoration: none;
}También podemos aplicarlo únicamente a una clase concreta:
a.enlace-sin-subrayado {
text-decoration: none;
}Sin embargo, eliminar el subrayado de todos los enlaces merece cierta precaución. El subrayado ayuda a distinguir visualmente qué textos son interactivos, por lo que si se elimina conviene proporcionar otra señal suficientemente clara, especialmente pensando en la accesibilidad.
Una alternativa habitual consiste en ocultarlo inicialmente y recuperarlo al pasar el cursor o utilizar el foco del teclado:
a {
text-decoration: none;
}
a:hover,
a:focus-visible {
text-decoration: underline;
}Cómo cambiar el color del subrayado
text-decoration-color permite establecer un color para la decoración diferente al color del propio texto.
.ejemplo {
color: #222;
text-decoration: underline;
text-decoration-color: #1742ff;
}El texto será oscuro mientras que su subrayado tendrá el color azul indicado.
También podemos utilizar la propiedad abreviada:
.ejemplo {
text-decoration: underline #1742ff;
}
Cómo cambiar el grosor del subrayado
La propiedad text-decoration-thickness controla el grosor de la línea decorativa.
.subrayado-grueso {
text-decoration: underline;
text-decoration-thickness: 3px;
}Puede utilizar valores como píxeles, unidades relativas o from-font, que permite utilizar la información proporcionada por la propia tipografía cuando está disponible.
.subrayado {
text-decoration: underline;
text-decoration-thickness: 0.12em;
}Las unidades relativas como em son interesantes cuando queremos que el grosor acompañe proporcionalmente al tamaño del texto.
Estilos de subrayado en CSS
text-decoration-style permite cambiar el aspecto de la línea. Los principales estilos son:
solid: línea continua.double: línea doble.dotted: línea de puntos.dashed: línea discontinua.wavy: línea ondulada.
Por ejemplo:
.ondulado {
text-decoration: underline wavy #1742ff;
}O utilizando propiedades independientes:
.ondulado {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #1742ff;
}
Cómo separar el subrayado del texto
Uno de los detalles que más pueden mejorar visualmente un subrayado es controlar la distancia entre la línea y las letras.
Para ello existe text-underline-offset:
.enlace {
text-decoration: underline;
text-underline-offset: 4px;
}Un desplazamiento moderado puede hacer que los enlaces y titulares sean más legibles, especialmente cuando se utilizan subrayados relativamente gruesos.
text-decoration-skip-ink es otra propiedad relacionada. Permite controlar si el subrayado debe evitar determinadas partes de los caracteres que cruzan la línea, como los descendentes de letras como la «g», la «j» o la «p».
.texto {
text-decoration: underline;
text-decoration-skip-ink: auto;
}Propiedades de text-decoration
Conviene distinguir entre las propiedades que forman parte de la propiedad abreviada text-decoration y otras propiedades relacionadas con la representación de los subrayados.
| Propiedad | Función | Ejemplo |
|---|---|---|
text-decoration-line |
Determina la posición o tipo de línea | underline |
text-decoration-color |
Define el color de la decoración | #1742ff |
text-decoration-style |
Define el estilo de la línea | wavy |
text-decoration-thickness |
Controla el grosor | 2px |
text-underline-offset |
Separa el subrayado del texto | 4px |
text-decoration-skip-ink |
Controla cómo cruza el subrayado los caracteres | auto |
Las cuatro primeras —line, color, style y thickness— pueden establecerse mediante el shorthand text-decoration. text-underline-offset y text-decoration-skip-ink son propiedades relacionadas, pero no forman parte de ese shorthand.
Ejemplos prácticos de text-decoration
Enlace con un subrayado moderno
a {
color: #1742ff;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}Subrayado que cambia al pasar el cursor
a {
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 4px;
}
a:hover {
text-decoration-color: currentColor;
}El enlace conserva la decoración, pero la línea pasa de transparente al color actual del texto cuando el usuario coloca el cursor sobre él.
Texto tachado
.precio-anterior {
text-decoration: line-through;
}Subrayado ondulado
.destacado {
text-decoration: underline wavy #1742ff 2px;
text-underline-offset: 5px;
}Combinar varias líneas
text-decoration-line permite utilizar más de un tipo de decoración simultáneamente:
.doble-decoracion {
text-decoration-line: underline overline;
text-decoration-color: #1742ff;
}No será algo habitual en una interfaz convencional, pero demuestra que las decoraciones de texto de CSS son bastante más flexibles que un simple underline.
Accesibilidad y buenas prácticas
Las decoraciones no son únicamente una cuestión estética. También pueden comunicar información al usuario.
- No utilices únicamente el color para diferenciar información importante.
- Evita eliminar indiscriminadamente el subrayado de todos los enlaces.
- Si eliminas una señal visual, proporciona otra forma clara de identificar el elemento interactivo.
- Mantén suficiente contraste entre el texto, la decoración y el fondo.
- Comprueba los estados
:hovery:focus-visiblecuando personalices enlaces. - Evita subrayados excesivamente gruesos o cercanos al texto si dificultan la lectura.
En proyectos de diseño web, estos pequeños detalles tipográficos pueden parecer secundarios, pero forman parte de una interfaz coherente, legible y fácil de utilizar.
Compatibilidad con navegadores
text-decoration cuenta con un soporte muy amplio en los navegadores actuales. Algunas de sus capacidades más avanzadas se incorporaron progresivamente, por lo que en proyectos que necesiten compatibilidad con navegadores antiguos conviene comprobar individualmente las propiedades utilizadas.
Para consultar la definición, sintaxis y compatibilidad actualizadas puedes utilizar la documentación de MDN Web Docs sobre text-decoration.
Cuando desarrolles una interfaz para producción, también es recomendable probar los estilos en distintos navegadores, tamaños de pantalla y dispositivos. La apariencia final de una decoración puede variar ligeramente según la tipografía y el motor de renderizado.
Preguntas frecuentes sobre text-decoration
¿Qué es text-decoration en CSS?
text-decoration es una propiedad abreviada de CSS que permite aplicar decoraciones mediante líneas al texto. Puede utilizarse para crear subrayados, tachados y líneas superiores, además de controlar características como el color, estilo y grosor de la decoración.
¿Cómo subrayar texto en CSS?
La forma más sencilla es utilizar text-decoration: underline; sobre el elemento o clase que quieras subrayar.
.texto {
text-decoration: underline;
}¿Cómo quitar el subrayado de un enlace en CSS?
Utiliza text-decoration: none;:
a {
text-decoration: none;
}Recuerda que, si eliminas el subrayado, el enlace debería seguir siendo fácilmente reconocible como elemento interactivo.
¿Cómo cambiar el color del subrayado en CSS?
Utiliza text-decoration-color. Por ejemplo, text-decoration-color: red;. También puedes incluir el color dentro de la propiedad abreviada text-decoration.
¿Cómo cambiar el grosor de un subrayado?
Utiliza text-decoration-thickness y establece el grosor deseado, por ejemplo text-decoration-thickness: 2px;.
¿Cómo separar el subrayado del texto?
La propiedad text-underline-offset controla la distancia entre el texto y su subrayado. Por ejemplo, text-underline-offset: 4px;.
¿Cómo hacer un subrayado ondulado en CSS?
Puedes utilizar text-decoration-style: wavy; o escribirlo mediante la propiedad abreviada:
.texto {
text-decoration: underline wavy;
}¿Cuál es la diferencia entre text-decoration y text-decoration-line?
text-decoration es una propiedad abreviada que permite definir conjuntamente línea, color, estilo y grosor. text-decoration-line controla específicamente qué línea decorativa se aplica, por ejemplo underline, overline o line-through.
Conclusión
Text-decoration en CSS va mucho más allá de añadir un simple subrayado. Con una misma familia de propiedades podemos controlar dónde aparece la línea, su color, grosor y estilo, además de ajustar detalles como la separación respecto al texto.
Para usos básicos, declaraciones como text-decoration: underline; y text-decoration: none; suelen ser suficientes. Cuando el diseño requiere mayor control, propiedades como text-decoration-thickness, text-decoration-color o text-underline-offset permiten integrar la decoración dentro del sistema visual de la web sin recurrir a JavaScript.
Si estás trabajando en una interfaz completa, estas decisiones forman parte de un conjunto mucho mayor de aspectos relacionados con la tipografía, la accesibilidad, la estructura HTML y el CSS. Puedes encontrar más contenidos prácticos en la categoría de CSS de Fonsi.