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

css

/* 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` No estándar	No 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

text-decoration-style = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy

Ejemplos

css

.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;
}

css

.example {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

html

<p class="example">Así se ve el resultado.</p>

Especificaciones

Specification
CSS Text Decoration Module Level 3 # text-decoration-style-property

Compatibilidad con navegadores

Help improve MDN

Learn how to contribute

This page was last modified on 1 ene 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content