Propiedad CSS text-decoration-line
La propiedad text-decoration-line especifica el tipo de línea utilizada para la decoración de texto.
La propiedad text-decoration-line es una de las propiedades de CSS3.
La propiedad text-decoration-line acepta uno o más valores.
INFO
La propiedad text-decoration-line es completamente compatible en todos los navegadores modernos sin prefijos de proveedor.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.textDecorationLine = "overline underline"; |
Sintaxis
Sintaxis de CSS text-decoration-line
text-decoration-line: none | underline | overline | line-through | initial | inherit;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 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 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 todos los valores de CSS text-decoration-line
<!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>Valores
| Valor | Descripción | Probar |
|---|---|---|
| none | No se especifica ninguna línea. | Probar » |
| underline | Especifica una línea debajo del texto. | Probar » |
| overline | Especifica una línea encima del texto. | Probar » |
| line-through | Especifica una línea a través del texto. | Probar » |
| initial | Establece la propiedad en su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
La propiedad text-decoration-line admitía anteriormente un valor blink que hacía parpadear el texto, pero este valor ahora está en desuso.
Práctica
¿Cuáles de estos son valores válidos para la propiedad 'text-decoration-line' en CSS?