Egenskaben text-decoration-style

Egenskaben text-decoration-style ændrer linjetypen for tekst: enkelt linje, dobbelt, i form af prikker, i form af stiplet, bølget linje.

Egenskaben bør anvendes sammen med egenskaberne text-decoration-line og text-decoration-color. Disse egenskaber udvider virkningen af egenskaben text-decoration, og er mere avancerede analoger.

Syntaks

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

Værdier

Standardværdi: solid.

Eksempel . Værdien wavy

Nu bliver teksten understreget med en rød bølget linje:

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

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

Результат:

Eksempel . Værdien dotted

Nu bliver teksten understreget med en rød prikket linje:

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

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

Результат:

Eksempel . Værdien double

Nu bliver teksten overstreget med en rød dobbelt linje:

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

Результат: