Ominaisuus text-decoration-style

Ominaisuus text-decoration-style muuttaa tekstin viivatyyppiä: yksittäinen viiva, kaksoisviiva, pisteviiva, katkoviiva, aaltoviiva.

Ominaisuutta tulisi käyttää yhdessä ominaisuuksien text-decoration-line ja text-decoration-color kanssa. Nämä ominaisuudet laajentavat text-decoration-ominaisuuden toimintoa, ollen kehittyneempiä vastineita.

Syntaksi

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

Arvot

Oletusarvo: solid.

Esimerkki . Arvo wavy

Nyt tekstistä tulee alleviivattu punaisella aaltoviivalla:

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

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

Результат:

Esimerkki . Arvo dotted

Nyt tekstistä tulee alleviivattu punaisella pisteviivalla:

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

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

Результат:

Esimerkki . Arvo double

Nyt teksti yliviivataan punaisella kaksoisviivalla:

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

Результат: