Propiedad text-decoration de CSS
La propiedad text-decoration se utiliza para establecer la decoración del texto.
En CSS3, es una propiedad abreviada para las siguientes propiedades:
Si falta el valor de una de estas propiedades, se establecerá automáticamente el valor predeterminado. Ten en cuenta que text-decoration-line no es obligatorio; si se omite, su valor predeterminado es none.
En la especificación CSS1, text-decoration no era una propiedad abreviada y tenía los siguientes valores:
- none
- underline
- overline
- line-through
- blink
| Valor inicial | none currentColor solid |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS1, CSS3 |
| Sintaxis DOM | object.style.textDecoration = "dashed"; |
Sintaxis
Sintaxis de la propiedad text-decoration de CSS
text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;Ten en cuenta que varios valores de línea se pueden combinar en la sintaxis abreviada, por ejemplo, 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>INFO
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 utilice su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué propiedad de CSS modifica la presentación del texto en línea agregando efectos como subrayados o tachados?