Свойство 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;
}

Результат: