Egenskapen text-decoration-style

Egenskapen text-decoration-style endrer linjetypen for tekst: enkelt linje, dobbel, i form av prikker, i form av streker, bølgete linje.

Egenskapen bør brukes sammen med egenskapene text-decoration-line og text-decoration-color. Disse egenskapene utvider virkningen av egenskapen text-decoration, og er mer avanserte alternativer.

Syntaks

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

Verdier

Standardverdi: solid.

Eksempel . Verdien wavy

Nå vil teksten bli understreket med en rød bølgete 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 . Verdien dotted

Nå vil teksten bli understreket med en rød linje i form av prikker:

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 . Verdien double

Nå vil teksten bli overstrøket med en rød dobbel 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;
}

Результат: