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
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