text-decoration-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 solid
Dibuja una línea simple double
Dibuja una línea doble dotted
Dibuja una línea punteada dashed
Dibuja una línea discontinua wavy
Dibuja una línea ondulada -moz-none
Non-standardNo dibuja una línea No usarse: usar text-decoration-line
: none
en su lugar inherit
-
Es una palabra clave que indica que se reutilice el valor calculado del elemento padre.
Sintaxis formal
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
Specification |
---|
CSS Text Decoration Module Level 3 # text-decoration-style-property |
Compatibilidad con navegadores
BCD tables only load in the browser