Propriedade text-decoration-style

A propriedade text-decoration-style altera o tipo de linha no texto: linha sólida, dupla, pontilhada, tracejada, linha ondulada.

A propriedade deve ser usada em conjunto com as propriedades text-decoration-line e text-decoration-color. Essas propriedades estendem a ação da propriedade text-decoration, sendo análogos mais avançados.

Sintaxe

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

Valores

Valor padrão: solid.

Exemplo . Valor wavy

Agora o texto ficará sublinhado com uma linha ondulada vermelha:

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

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

Результат:

Exemplo . Valor dotted

Agora o texto ficará sublinhado com uma linha pontilhada vermelha:

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

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

Результат:

Exemplo . Valor double

Agora o texto ficará tachado com uma linha dupla vermelha:

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

Результат: