Propiedad CSS text-decoration-line
Usa la propiedad CSS text-decoration-line para indicar el tipo de línea en la decoración de texto. Ve valores y ejemplos.
La propiedad text-decoration-line establece el tipo de línea utilizada para la decoración de texto: underline, overline, line-through, o cualquier combinación de ellas.
Es una de las cuatro propiedades longhand que forman la propiedad abreviada text-decoration, junto con text-decoration-color, text-decoration-style y text-decoration-thickness. Usa text-decoration-line por sí sola cuando solo necesites cambiar qué líneas aparecen y quieras dejar el color, el estilo y el grosor sin modificar.
Esta página cubre los valores aceptados por la propiedad, cómo combinar varias líneas a la vez, la relación con la propiedad abreviada y algunos errores prácticos comunes.
La propiedad text-decoration-line es totalmente compatible con todos los navegadores modernos sin prefijos de proveedor. Es una de las propiedades CSS3.
Por qué usar text-decoration-line
Una razón habitual para recurrir a la propiedad longhand es agregar o eliminar una sola línea sin alterar el resto de la decoración. Por ejemplo, los enlaces tienen subrayado por defecto; establecer text-decoration-line: none elimina ese subrayado mientras que aún permite definir un color de subrayado personalizado más adelante mediante la propiedad abreviada. La propiedad también acepta múltiples palabras clave, por lo que puedes colocar un subrayado y una línea superior en el mismo texto en una sola declaración.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Se hereda | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.textDecorationLine = "overline underline"; |
Sintaxis
Sintaxis CSS de text-decoration-line
text-decoration-line: none | [ underline || overline || line-through ] | initial | inherit;La palabra clave none se usa sola, pero underline, overline y line-through se pueden combinar en una sola declaración, separadas por espacios, y el orden no importa:
/* a single line */
text-decoration-line: underline;
/* two lines at once */
text-decoration-line: underline overline;
/* all three */
text-decoration-line: underline overline line-through;Ejemplo de la propiedad text-decoration-line:
Ejemplo de código CSS text-decoration-line
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Resultado
Ejemplo de la propiedad text-decoration-line con el valor "underline":
Ejemplo de CSS text-decoration-line con el valor underline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Ejemplo de la propiedad text-decoration-line con el valor "line-through":
Ejemplo de CSS text-decoration-line con el valor line-through
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: line-through;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Ejemplo de la propiedad text-decoration-line con todos los valores:
Ejemplo de CSS text-decoration-line con todos los valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 20px 0;
}
div.t1 {
text-decoration-line: none;
}
div.t2 {
text-decoration-line: underline;
}
div.t3 {
text-decoration-line: line-through;
}
div.t4 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<div class="t1">
Lorem Ipsum is simply dummy text...
</div>
<div class="t2">
Lorem Ipsum is simply dummy text...
</div>
<div class="t3">
Lorem Ipsum is simply dummy text...
</div>
<div class="t4">
Lorem Ipsum is simply dummy text...
</div>
</body>
</html>Combinar text-decoration-line con la propiedad abreviada
Como text-decoration-line solo controla las líneas, generalmente se combina con las otras propiedades longhand, o simplemente se usa la propiedad abreviada text-decoration, que las establece todas a la vez. Estas dos reglas producen el mismo resultado:
/* longhands */
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
/* shorthand equivalent */
p {
text-decoration: underline red wavy;
}Recurrir a la propiedad longhand resulta útil cuando quieres anular solo una parte sin reescribir toda la decoración; por ejemplo, cambiar únicamente el tipo de línea en :hover mientras conservas el color y el estilo heredados.
Nota de accesibilidad
text-decoration-line: line-through es puramente visual: las tecnologías de asistencia no anuncian que el texto está tachado. Para transmitir "este contenido fue eliminado" o "borrado" a los usuarios de lectores de pantalla, márcalo con el elemento semántico <del> o <s> en lugar de depender únicamente de CSS.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| none | No se especifica ninguna línea. | Pruébalo » |
| underline | Especifica una línea debajo del texto. | Pruébalo » |
| overline | Especifica una línea sobre el texto. | Pruébalo » |
| line-through | Especifica una línea a través del texto. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
La propiedad text-decoration-line anteriormente admitía un valor blink que hacía que el texto parpadeara. Ahora está obsoleto y la mayoría de los navegadores lo ignoran, por lo que no debes usarlo en código nuevo.
Propiedades relacionadas
- text-decoration — la propiedad abreviada que establece la línea, el color, el estilo y el grosor juntos.
- text-decoration-color — establece el color de la línea de decoración.
- text-decoration-style — establece la línea como
solid,double,dotted,dashedowavy.