Eigenschap text-decoration-style

De eigenschap text-decoration-style verandert het type lijn van de tekst: enkele lijn, dubbele, als stippen, als streepjes, golvende lijn.

De eigenschap moet worden gebruikt in combinatie met de eigenschappen text-decoration-line en text-decoration-color. Deze eigenschappen breiden de werking van de eigenschap text-decoration uit, en zijn geavanceerdere equivalenten.

Syntaxis

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

Waarden

Standaardwaarde: solid.

Voorbeeld . Waarde wavy

Nu wordt de tekst onderstreept met een rode golvende lijn:

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

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

Результат:

Voorbeeld . Waarde dotted

Nu wordt de tekst onderstreept met een rode lijn in de vorm van stippen:

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

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

Результат:

Voorbeeld . Waarde double

Nu wordt de tekst doorgestreept met een rode dubbele lijn:

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

Результат: