Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
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 propiedadtext-decoration-line deCSS 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> <p> I'd far rather be <span>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 abreviadatext-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 propiedadtext-decoration-line se especifica comonone, ouno o más valores separados por espacios de la lista a continuación.
Valores
noneNo produce decoración de texto.
underlineCada línea de texto tiene una línea decorativa debajo.
overlineCada línea de texto tiene una línea decorativa encima.
line-throughCada línea de texto tiene una línea decorativa que pasa por su centro.
blinkObsoletoEl texto parpadea (alterna entre visible e invisible). Es posible que algunos navegadores no parpadeen el texto. Este valor estáobsoleto en favor deanimaciones 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>¡Aquí hay un texto con subrayado rojo ondulado!</p><p>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