Proprietatea text-decoration-style

Proprietatea text-decoration-style schimbă tipul liniei la text: linie simplă, dublă, sub formă de puncte, sub formă de liniuțe, linie ondulată.

Proprietatea trebuie utilizată împreună cu proprietățile text-decoration-line și text-decoration-color. Aceste proprietăți extind acțiunea proprietății text-decoration, fiind analogi mai avansați.

Sintaxă

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

Valori

Valoare implicită: solid.

Exemplu . Valoarea wavy

Acum textul va deveni subliniat cu o linie ondulată roșie:

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

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

Результат:

Exemplu . Valoarea dotted

Acum textul va deveni subliniat cu o linie sub formă de puncte roșie:

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

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

Результат:

Exemplu . Valoarea double

Acum textul va deveni tăiat cu o linie dublă roșie:

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

Результат: