text-decoration
Поддержка браузерами
12.0+ | 3.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство text-decoration
позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).
Свойство text-decoration
может принимать одно значение или больше. Чтобы задать сразу несколько значений, их следует разделить пробелами.
Самый часто используемый декор для текста - это подчёркивание. Подчёркнутый текст задаётся значением underline
:
/*делаем подчёркнутый текст*/ span {text-decoration: underline;}
Если вам, наоборот, нужно убрать подчёркивание, например убрать подчеркивание ссылки, заданное по умолчанию, то нужно воспользоваться значением none
:
/*убираем подчёркивание ссылок*/ a {text-decoration: none;}
Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:
/*убираем подчёркивание ссылок*/ a {text-decoration: none;} /*задаём подчёркивание ссылок при наведении*/ a:hover {text-decoration: underline;}
К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством text-decoration
, будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).
Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: <u> (подчёркнутый текст) и <del> (зачёркнутый текст).
Значение по умолчанию: | none |
---|---|
Применяется: | ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS1 |
Синтаксис JavaScript: | object.style.textDecoration="overline" |
Синтаксис
text-decoration: none|underline|overline|line-through|inherit;
Значения свойства
Значение | Описание |
---|---|
none | Оставляет текст без изменений. |
underline | Определяет горизонтальную линию под текстом. |
overline | Определяет горизонтальную линию над текстом. |
line-through | Определяет линию перечеркивающую текст. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
Измените значение свойства для просмотра результата.
text-decoration: none;
}