text-decoration-style
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde enero de 2020.
Resumen
La propiedad CSS text-decoration-style define el estilo de las líneas especificadas por text-decoration-line. El estilo aplica a todas las líneas, no hay manera de establecer diferentes estilos para cada línea definida por text-decoration-line.
Si la decoración especificada tiene un significado semántico propio, como line-through, que significa que el texto ha sido removido, se recomienda a los autores denotar este significado usando una etiqueta HTML, como <del> o <s>. Siendo que los navegadores pueden deshabilitar estilos en algunos casos, el significado semántico no desaparecerá en dicha situación.
| Valor inicial | solid |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |
Sintaxis
/* Valores clave */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
/* Valores globales */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;
Valores
solid double dotted dashed wavy-
Es una de las siguientes palabras clave:
Palabra clave Descripción Comentario solidDibuja una línea simple doubleDibuja una línea doble dottedDibuja una línea punteada dashedDibuja una línea discontinua wavyDibuja una línea ondulada -moz-noneNo dibuja una línea No usarse: usar text-decoration-line: noneen su lugar inherit-
Es una palabra clave que indica que se reutilice el valor calculado del elemento padre.
Sintaxis formal
text-decoration-style =
solid |
double |
dotted |
dashed |
wavy
Ejemplos
.example {
-moz-text-decoration-line: underline;
-moz-text-decoration-style: wavy;
-moz-text-decoration-color: red;
-webkit-text-decoration-line: underline;
-webkit-text-decoration-style: wavy;
-webkit-text-decoration-color: red;
}
.example {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
<p class="example">Así se ve el resultado.</p>
Especificaciones
| Especificación |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-style-property |