Свойство text-decoration-line задает расположение линии у текста.

Свойство следует использовать совместно со свойствами text-decoration-style и text-decoration-color, которые добавляют тексту различные эффекты: подчеркивание, перечеркивание, линию сверху.

Эти свойства расширяют действие свойства text-decoration (более продвинутые аналоги).

Примеры смотреть в Мозилле (на 2015 год).

Синтаксис

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

Значения

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

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

Примеры

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

Сейчас у текста будет подчеркивание снизу и его цвет будет отличаться от цвета текста, так как задано свойство text-decoration-color в значении red:

p {
	-moz-text-decoration-style: solid;
	-moz-text-decoration-color: red;
	-moz-text-decoration-line: underline;
	-webkit-text-decoration-style: solid;
	-webkit-text-decoration-color: red;
	-webkit-text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: red;
	text-decoration-line: underline;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.