Својство text-decoration-style

Својство text-decoration-style мења тип линије код текста: појединачна линија, двострука, у виду тачака, у виду цртица, таласаста линија.

Својство треба користити заједно са својствима text-decoration-line и text-decoration-color. Ова својства проширују деловање својства text-decoration, представљајући напредније аналогије.

Синтакса

cssселектор {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

Вредности

Вредност	Опис
`solid`	Пуна линија.
`double`	Двострука линија.
`dotted`	Линија у виду тачака.
`dashed`	Линија у виду цртица.
`wavy`	Таласаста линија.

Подразумевана вредност: solid.

Пример . Вредност wavy

Сада ће текст постати подвучен црвеном таласастом линијом:

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

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

Результат:

Пример . Вредност dotted

Сада ће текст постати подвучен црвеном линијом у виду тачака:

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

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

Результат:

Пример . Вредност double

Сада ће текст постати прецртан црвеном двоструком линијом:

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

Результат: