
La propiedad text-decoration-line CSS especifica el tipo de líneas decorativas utilizadas en el texto. Si va a establecer varias propiedades para definir la forma de las líneas de decoración, se recomienda utilizar la propiedad corta text-decoration
.
Funciones text-decoration-line css
Valor inicial | none |
---|---|
Aplicado a | Todos los artículos. |
Heredable | No |
Móvil | No |
Valor calculado | Como se especificó. |
/* Palabras reservadas */ text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; text-decoration-line: underline overline; /* usa dos líneas decorativas */ text-decoration-line: overline underline line-through; /* Usa múltiples fuentes decorativas */ /* Valores globales*/ text-decoration-line: inherit; text-decoration-line: initial; text-decoration-line: unset;
Ejemplos y aplicaciones en código
Ejemplo de uso de la propiedad text-decoration-line
con atributos text-decoration-color
y text-decoration-style
sobre dos elementos <p>
para agregar líneas decorativas al texto dentro de ellos:
< p class = "wavy" > Este es un texto subrayado ondulado de color rojo. </ p > < p class = "both" > Este texto tiene líneas arriba y abajo. </ p >
Código CSS:
.wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } .both { text-decoration-line: underline overline; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Soporte básico | 57 | 36.0 | No soportado | 44 | 7.1 con el anterior -webkit- |
Características generales
La propiedad acepta una text-decoration-line
palabra reservada none
(lo que significa que no se usa decoración de texto) o los valores de una o más de las siguientes palabras reservadas separadas por un espacio.
underline
La fuente decorativa se colocará debajo del texto.
overline
La línea decorativa se colocará encima del texto.
line-through
La línea decorativa atravesará el texto.
blink
El texto parpadeará, pero está obsoleto porque se prefieren las animaciones CSS.
Estructura text-decoration-line css
text-decoration-line: none | [ underline || overline || line-through || blink ];
Consulte también
- La página de propiedades
text-decoration
que define la forma de las líneas decorativas utilizadas en el texto. - Página de propiedades
text-decoration-color
que especifica el color de las fuentes decorativas utilizadas en el texto. - La página de propiedades
text-decoration-style
que define la forma de las líneas decorativas utilizadas en el texto.
- Propiedades float en CSS
- Propiedad clear en CSS
- Introducción al Lenguaje de Programación CSS
- Diferencias entre SASS y SCSS
- Características z-index en CSS
- Características width en CSS
- Características visibility en CSS
- Características top en CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características right en CSS
- Características position en CSS
- Características padding-top en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características padding en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow-wrap en CSS
- Características overflow en CSS
- Características order en CSS
- Características min-width en CSS
- Características min-height en CSS
- Características max-width en CSS
- Características max-height en CSS
- Características margin-top en CSS
- Características margin-right en CSS
- Características margin-left en CSS
- Características margin-bottom en CSS
- Características line-height en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características left en CSS
- Características justify-content en CSS
- Características height en CSS
- Características font-weight en CSS