Оформление текста (text-decoration)

Свойство CSS text-decoration используется для установки форматирования текста и может иметь значения: underline , overline , line-through,inherit,none или blink. . Это значит, что текст можно подчеркнуть, провести линию под или над текстом и т. д. Есть возможность применить от одного до нескольких значений которые нужно прописывать через пробел. Если же к вашему тексту передаётся по наследству какой-либо стиль оформления, а вам это не нужно, просто используйте в качестве значения свойства “none”. Свойства применимы ко всем элементам. Создано в версии CSS1 и проходит валидацию согласно версии CSS3.

Синтаксис

text-decoration: [ blink  line-through  overline  underline  none  inherit ]

Значения

blink

Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и не проходит валидацию, взамен предлагается использовать анимацию.

line-through

Создает перечеркнутый текст.

overline

Линия проходит над текстом.

underline

Устанавливает подчеркнутый текст.

none

Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое установлено по умолчанию.

inherit

Значение наследуется у родителя.

Пример:

Свойство CSS text-decoration-line устанавливает, какие линии добавляются к элементу.

Свойство CSS text-decoration-color устанавливает цвет линии подчеркивания, overline или перечёркивания указанные в text-decoration-line .

Это предпочтительный способ задать цвет линий, а не с помощью комбинации других элементов HTML.

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

Синтаксис

text-decoration-line: [ underline || overline || line-through || blink ]
text-decoration-style: [ solid || double || double || dashed || wavy ]
text-decoration-color: [ currentColor || red || #00ff00 || rgba(255, 128, 128, 0.5) || transparent ]

text-decoration может быть так же использован в сокращённом виде:

.underlined {
  text-decoration: underline dotted red;
}

В настоящее время только Firefox поддерживает эту возможность без префикса. Сафари и Хром поддерживают его только с –webkit префиксом.

Пример:

Пример: