text-decoration
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration |
Версии CSS
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.textDecoration
[window.]document.getElementById(» elementID «).style.textDecorationBlink
[window.]document.getElementById(» elementID «).style.textDecorationLineThrough
[window.]document.getElementById(» elementID «).style.textDecorationNone
[window.]document.getElementById(» elementID «).style.textDecorationOverLine
[window.]document.getElementById( «elementID «).style.textDecorationUnderline
Браузеры
text-decoration
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration |
Версии CSS
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.textDecoration
[window.]document.getElementById(» elementID «).style.textDecorationBlink
[window.]document.getElementById(» elementID «).style.textDecorationLineThrough
[window.]document.getElementById(» elementID «).style.textDecorationNone
[window.]document.getElementById(» elementID «).style.textDecorationOverLine
[window.]document.getElementById( «elementID «).style.textDecorationUnderline
Браузеры
Подчеркивание в CSS (красивые эффекты с примерами кода)
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Перевод статьи «CSS Underline: 20+ Examples».
CSS-свойство text-decoration
Свойство text-decoration — самый простой способ подчеркнуть текст. Но этому способу не хватает настраиваемости, и это проблема. Более продвинутые в этом смысле способы подчеркивания мы рассмотрим чуть дальше по тексту.
Давайте посмотрим, как при помощи text-decoration можно сделать простое подчеркивание.
Свойство text-decoration — это сокращенный вариант записи трех других свойств:
Вот несколько примеров:
Если вы хотите добавить подчеркивание, которое будет появляться только при наведении курсора, используйте следующие CSS-правила:
А теперь давайте перейдем к более интересным способам подчеркнуть текст.
Градиентное подчеркивание
При помощи свойства background: linear-gradient и других свойств фона можно создать градиентное подчеркивание. Вот пример:
Почитать больше о градиентах можно в статье «CSS Gradients: 8 Examples of Usage».
Короткое подчеркивание
Вы также можете установить толщину линии, например 2 px (в примере — border-bottom: 2px solid #f9dd94; ).
Подчеркивание «маркером»
При помощи свойства transform можно сделать короткое подчеркивание скошенной линией.
Также можно сделать подчеркивание «маркером» длинного куска текста. Пример, на который меня вдохновил Codepen.io/Ash:
Правила, касающиеся этого подчеркивания:
Подчеркивание заголовка
Многострочное подчеркивание
Допустим, мы хотим создать подчеркивание нескольких строк текста. Для этого подойдут не все способы.
background-repeat: repeat-x; делает подчеркивание горизонтальным.
Кроме того, можно сделать так, чтобы многострочное подчеркивание показывалось только при наведении курсора.
Использование изображений в качестве подчеркивания в CSS
Для стилизации подчеркивания в CSS также можно использовать изображения (в формате SVG или PNG). Ниже приведены примеры (на основе CodePen автор John D. Jameson).
Анимированное подчеркивание при наведении
Давайте теперь создадим анимированное подчеркивание для кнопок меню. Нам понадобится следующая разметка:
Вот общие стили для четырех примеров (специфические стили будут приведены ниже):
Анимированное подчеркивание при наведении № 1
Анимированное подчеркивание при наведении № 2
Анимированное подчеркивание при наведении № 3
Анимированное подчеркивание при наведении № 4
Анимированное подчеркивание, созданное при помощи свойства box-shadow
Здесь мы добавили к элементу две тени:
Почитать больше о тенях можно здесь.
Подчеркивание «от руки», анимированное при наведении
Наконец, давайте создадим необычные подчеркивания, которые будут проявляться при наведении курсора. Первое будет напоминать подчеркивание от руки, а второе — выделение маркером от руки.
Заменяем комментарий «Invisible SVG block» («Невидимый SVG-блок») на следующий код:
Вот правила CSS, позволяющие спрятать этот элемент:
А эти правила будут общими для обоих примеров:
Первый пример подчеркивания с использованием SVG:
Заменяем комментарий «First SVG example» следующим кодом (используйте любой свой текст, главное — не меняйте структуру классов):
Второй пример подчеркивания с использованием SVG:
Заменяем комментарий «Second SVG example» следующим кодом:
На последние два примера меня вдохновило Tympanus demo.
Свойство text-decoration
Синтаксис
Описание
Свойство text-decoration добавляет к тексту дополнительные элементы декора, такие как подчёркивание, зачёркивание текста, линия над текстом.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | отсутствует; |
| Проценты: | не используются; |
| Медиа : | визуальные. |
Примечание
В CSS 3 можно устанавливать дополнительно цвет и тип линии.
JavaScript
Поддержка браузерами
[1] ‒ поддерживает синтаксис CSS 2-2.2.
Спецификация
Значения
none Указывает на отсутствие элементов декора. underline Подчёркивает текст.
overline Устанавливает линию над текстом.
line-through Перечёркивает текст.
blink Создаёт мигающий текст. (Данное свойство не поддерживается большинством современных браузеров.)
Задаёт тип элемента декора.
Задаёт стиль элемента декора.
Задаёт цвет элемента декора. inherit Указывает, что элемент должен унаследовать параметры родительского элемента.
Изучаем подчеркивание текста CSS
Подходы
Способы, с помощью которых можно подчеркнуть текст в интернете:
Давайте рассмотрим их один за другим и поговорим об их плюсах и минусах.
text-decoration
text-decoration CSS — это самый простой способ подчеркивания в CSS. Применяется всего одно свойство и на этом все. Для небольших размеров шрифта это может выглядеть довольно прилично, но увеличьте размер и та же линия начинает выглядеть неуклюже.
Самая большая проблема применения text-decoration — отсутствие настраиваемости. Свойство соответствует любому размеру шрифта или цвету текста, к которому оно применено, и не существует кроссбраузерного способа изменить заданный стиль.
border-bottom
Результат применения border-bottom к строчным элементам:
box-shadow
Это свойство формирует подчеркивание с помощью двух теней: одна создает прямоугольник, вторая — скрывает большую его часть, кроме нижней. Данный метод применим только для однотонного фона.
background-image
background-image дает результат, подходящий под все перечисленные критерии. При этом используются linear-gradient и background-position, чтобы создать изображение, которое повторяется по горизонтали вдоль строк текста. При этом для текста должно быть задано display: inline;.
Вместо linear-gradient можно добавить собственное изображение с какими-нибудь эффектами.
Фильтры SVG
Вот как это выглядит в Chrome и Firefox :
Underline.js (canvas)
Это только техническая демо-версия, поэтому для использования библиотеки придется осуществить глобальные изменения в разрабатываемом проекте.
Мы приводим данный метод для демонстрации возможностей при создании красивых, интерактивных подчеркиваний.
Свойства text-decoration-*
Это свойство прекрасно работает само по себе, но можно добавить несколько экспериментальных свойств для настройки внешнего вида:
Только не радуйтесь раньше времени. Помните о проблеме поддержки браузерами.
