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

Свойство text-decoration-style меняет тип линии над текстом: одиночная линия, двойная, в виде точек, в виде тире, волнистая линия.

Свойство следует использовать совместно со свойствами text-decoration-line и text-decoration-color. Эти свойства расширяют действие свойства text-decoration, являясь более продвинутыми аналогами.

Синтаксис

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

Значения

Значение	Описание
`solid`	Сплошная линия.
`double`	Двойная линия.
`dotted`	Линия в виде точек.
`dashed`	Линия в виде тире.
`wavy`	Волнистая линия.

Значение по умолчанию: solid.

Пример . Значение wavy

Сейчас текст станет подчеркнутым красной волнистой линией:

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

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

Пример . Значение dotted

Сейчас текст станет подчеркнутым красной линией в виде точек:

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

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

Пример . Значение double

Сейчас текст станет перечеркнутым красной двойной линией:

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

#elem {
	text-decoration-style: double;
	text-decoration-color: red;
	text-decoration-line: line-through;
}