Propiedad text-decoration-style

La propiedad text-decoration-style cambia el tipo de línea en el texto: línea simple, doble, en forma de puntos, en forma de guiones, línea ondulada.

La propiedad debe usarse junto con las propiedades text-decoration-line y text-decoration-color. Estas propiedades amplían la acción de la propiedad text-decoration, siendo análogos más avanzados.

Sintaxis

cssselector {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

Valores

Valor	Descripción
`solid`	Línea continua.
`double`	Línea doble.
`dotted`	Línea en forma de puntos.
`dashed`	Línea en forma de guiones.
`wavy`	Línea ondulada.

Valor por defecto: solid.

Ejemplo . Valor wavy

Ahora el texto se subrayará con una línea ondulada roja:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Ejemplo . Valor dotted

Ahora el texto se subrayará con una línea roja en forma de puntos:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: dotted;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Ejemplo . Valor double

Ahora el texto se tachará con una línea doble roja:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: double;
  text-decoration-color: red;
  text-decoration-line: line-through;
}

Результат: