Vlastnosť text-decoration-style

Vlastnosť text-decoration-style mení typ línie u textu: jednoduchá čiara, dvojitá, v podobe bodiek, v podobe pomlčiek, vlnovka.

Vlastnosť by sa mala používať spoločne s vlastnosťami text-decoration-line a text-decoration-color. Tieto vlastnosti rozširujú pôsobenie vlastnosti text-decoration, pričom sú jej pokročilejšími analógmi.

Syntax

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

Hodnoty

Predvolená hodnota: solid.

Príklad . Hodnota wavy

Teraz bude text podčiarknutý červenou vlnovkou:

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

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

Результат:

Príklad . Hodnota dotted

Teraz bude text podčiarknutý červenou čiarkou v podobe bodiek:

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

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

Результат:

Príklad . Hodnota double

Teraz bude text preškrtnutý červenou dvojitou čiarou:

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

Результат: