Właściwość text-decoration-style

Właściwość text-decoration-style zmienia typ linii tekstu: pojedyncza linia, podwójna, w postaci kropek, w postaci kresek, linia falista.

Właściwość należy stosować łącznie z właściwościami text-decoration-line i text-decoration-color. Te właściwości rozszerzają działanie właściwości text-decoration, stanowiąc bardziej zaawansowane analogi.

Składnia

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

Wartości

Wartość domyślna: solid.

Przykład . Wartość wavy

Teraz tekst stanie się podkreślony czerwoną falistą linią:

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

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

Результат:

Przykład . Wartość dotted

Teraz tekst stanie się podkreślony czerwoną linią w postaci kropek:

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

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

Результат:

Przykład . Wartość double

Teraz tekst stanie się przekreślony czerwoną podwójną linią:

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

Результат: