Vlastnost text-decoration-style

Vlastnost text-decoration-style mění typ čáry u textu: jednoduchá čára, dvojitá, v podobě teček, v podobě čárek, vlnovka.

Vlastnost by se měla používat společně s vlastnostmi text-decoration-line a text-decoration-color. Tyto vlastnosti rozšiřují působenost vlastnosti text-decoration, protože jsou její pokročilejší alternativou.

Syntaxe

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

Hodnoty

Výchozí hodnota: solid.

Příklad . Hodnota wavy

Nyní bude text podtržen č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;
}

Результат:

Příklad . Hodnota dotted

Nyní bude text podtržen červenou čárou v podobě teček:

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

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

Результат:

Příklad . Hodnota double

Nyní bude text přeškrtnut červenou dvojitou čárou:

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

Результат: