text-decoration-line
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.
* Some parts of this feature may have varying levels of support.
La propiedad text-decoration-line de CSS establece el tipo de decoración que se utiliza en el texto de un elemento, como un subrayado o un sobrerayado.
Pruébalo
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: underline overline;
text-decoration-line: underline line-through;
<section id="default-example">
<p>
I'd far rather be
<span class="transition-all" id="example-element">happy than right</span>
any day.
</p>
</section>
p {
font: 1.5em sans-serif;
}
Al configurar varias propiedades de decoración de línea a la vez, puede ser más conveniente usar la propiedad abreviada text-decoration en su lugar.
Sintaxis
/* Palabra clave única */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
/* Varias palabras clave */
text-decoration-line: underline overline; /* Dos líneas de decoración */
text-decoration-line: overline underline line-through; /* Múltiples líneas de decoración */
/* Valores globales */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;
La propiedad text-decoration-line se especifica como none, o uno o más valores separados por espacios de la lista a continuación.
Valores
none-
No produce decoración de texto.
underline-
Cada línea de texto tiene una línea decorativa debajo.
overline-
Cada línea de texto tiene una línea decorativa encima.
line-through-
Cada línea de texto tiene una línea decorativa que pasa por su centro.
blinkObsoleto-
El texto parpadea (alterna entre visible e invisible). Es posible que algunos navegadores no parpadeen el texto. Este valor está obsoleto en favor de animaciones CSS.
Definicion formal
| Valor inicial | none |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |
Sintaxis formal
text-decoration-line =
none |
[ underline || overline || line-through || blink ] |
spelling-error |
grammar-error
Ejemplos
Ejemplo básico
<p class="wavy">¡Aquí hay un texto con subrayado rojo ondulado!</p>
<p class="both">Este texto tiene líneas arriba y abajo.</p>
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
.both {
text-decoration-line: underline overline;
}
Especificaciones
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-line-property |
Compatibilidad con navegadores
Loading…
Véase también
- Al configurar varias propiedades de decoración de línea a la vez, puede ser más conveniente usar la propiedad abreviada
text-decorationen su lugar, que también incluye: text-underline-offset