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

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

Синтаксис

cssселектор {
  text-decoration-line: underline | line-through | overline | none;
}

Значения

Значение	Описание
`underline`	Делает подчеркнутый текст.
`line-through`	Делает перечеркнутый текст.
`overline`	Делает линию над текстом.
`none`	Отменяет подчеркивание подчеркнутого элемента. Чаще всего используется для ссылок, так как они по умолчанию подчеркнуты.

Значение по умолчанию: none. Для ссылок значение по умолчанию: underline.

Пример

Давайте перечеркнем текст красной линией:

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

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

Результат: