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

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

Синтаксис

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

Значения

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

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

Примеры

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

p {
	text-decoration: 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.

Пример . Значение line-through

p {
	text-decoration: line-through;
}

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

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.

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

p {
	text-decoration: overline;
}

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

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.