Propiedad CSS text-decoration
Usa la propiedad abreviada CSS text-decoration para especificar el tipo de línea, estilo y color de la decoración de texto. Ve los valores y ejemplos prácticos.
La propiedad CSS text-decoration añade líneas decorativas al texto: la más común es el subrayado bajo un enlace, una línea que atraviesa el texto eliminado o una línea superior para dar énfasis. Es la propiedad que se usa cuando se quiere agregar (o, con la misma frecuencia, eliminar) esas líneas.
Esta página cubre la sintaxis abreviada, todos los valores que acepta, cómo interactúa con sus propiedades individuales y los casos prácticos en los que realmente se usa (como el estilo de los enlaces).
Qué hace text-decoration
En CSS3, text-decoration es una propiedad abreviada que establece tres propiedades individuales a la vez:
- text-decoration-line — qué líneas aparecen (
underline,overline,line-througho varias a la vez). - text-decoration-color — el color de la línea (por defecto, el color del texto del elemento,
currentColor). - text-decoration-style — el estilo de la línea (
solid,double,dotted,dashed,wavy).
Al ser una propiedad abreviada, cualquier propiedad individual que se omita se restablece a su valor inicial. La línea en sí, text-decoration-line, tiene como valor predeterminado none, por lo que text-decoration: none es la forma canónica de quitar el subrayado de un enlace.
En la especificación original de CSS1, text-decoration no era una propiedad abreviada. Era una propiedad única que solo aceptaba estas palabras clave:
noneunderlineoverlineline-throughblink(actualmente obsoleto e ignorado por los navegadores modernos)
La propiedad abreviada de CSS3 es un superconjunto de esa lista, por lo que las declaraciones antiguas de una sola palabra clave como text-decoration: underline siguen funcionando exactamente igual que antes.
Cuándo usarla
- Eliminar el subrayado de los enlaces:
a { text-decoration: none; }— luego añade tu propio estilo en hover. - Marcar ediciones:
line-throughpara texto eliminado,underlinepara texto insertado. - Subrayados personalizados: combina color y estilos
wavy/dottedpara subrayados tipo corrector ortográfico o decoraciones de enlace de marca.
Consejo de accesibilidad: Los subrayados son la señal convencional de que un texto es un enlace. Si los eliminas, haz que los enlaces sean distinguibles de otra manera (una diferencia de color clara más un subrayado en hover/focus), para que el enlace siga siendo evidente para todos los usuarios.
| Propiedad | Detalle |
|---|---|
| Valor inicial | none currentColor solid (el valor inicial de cada propiedad individual) |
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredada | No. |
| Animable | No. |
| Versión | CSS1, CSS3 |
| Sintaxis DOM | object.style.textDecoration = "underline dotted red"; |
Sintaxis
text-decoration: <line> <color> <style> | initial | inherit;<line>es una o más palabras clave detext-decoration-line(none,underline,overline,line-through).<color>es cualquier valor de color CSS.<style>es una palabra clave detext-decoration-style(solid,double,dotted,dashed,wavy).
El orden de las tres partes no importa, y se puede omitir cualquiera de ellas. Se pueden combinar varios valores de línea: por ejemplo, underline overline dibuja ambas a la vez:
/* underline, in red, with a wavy style */
text-decoration: underline wavy red;
/* two lines at once; color and style fall back to defaults */
text-decoration: underline overline;Ejemplo de la propiedad text-decoration:
Ejemplo de la propiedad CSS text-decoration con los valores overline, line-through, underline y overline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
text-decoration: overline;
}
.b {
text-decoration: line-through;
}
.c {
text-decoration: underline;
}
.d {
text-decoration: underline overline;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
<p class="d">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Resultado
Ejemplo de la propiedad text-decoration con un color especificado:
Ejemplo de la propiedad CSS text-decoration con la propiedad text-decoration-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration: underline;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>El prefijo -webkit- se omite aquí, ya que los navegadores modernos admiten completamente la propiedad estándar.
Ejemplo de la propiedad text-decoration con un estilo especificado:
Ejemplo de la propiedad CSS text-decoration con las propiedades text-decoration-line y text-decoration-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: underline;
}
div.t1 {
text-decoration-style: dotted;
}
div.t2 {
text-decoration-style: wavy;
}
div.t3 {
text-decoration-style: solid;
}
div.t4 {
text-decoration-line: overline underline;
text-decoration-style: double;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<div class="t1">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t2">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t3">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t4">Lorem ipsum is simply dummy text...</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| text-decoration-line | Especifica el tipo de decoración del texto. |
| text-decoration-color | Especifica el color de la decoración del texto. |
| text-decoration-style | Especifica el estilo de la decoración del texto. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
- text-decoration-line — establece la(s) línea(s) de forma independiente.
- text-decoration-color — establece el color de la decoración independientemente del color del texto.
- text-decoration-style — elige líneas solid, double, dotted, dashed o wavy.