Свойство text-decoration в CSS

декоративные линии на тексте

Определяет оформление текста в виде линий над ним. Если text-decoration задан для родителя, все дочерние элементы тоже будут иметь такое же оформление. Отменить его с помощью text-decoration: none не получится.

Это короткая запись свойств text-decoration-line, text-decoration-color, text-decoration-style.

Сокращенная запись работает только с префиксами -webkit и -moz.
См. таблицу внизу Поддержка браузерами.

Примеры

text-decoration: underline;

/* с префиксами */
-webkit-text-decoration: underline wavy red;
-moz-text-decoration: underline wavy red;
text-decoration: underline wavy red;

Значения

Значение Описание
text-decoration-line Обязательно. Тип линии:
underline — под текстом
overline — над текстом
line-through — через текст (по середине)
text-decoration-color Цвет линии в цветах CSS.
text-decoration-style Стиль линии:
solidсплошная, по умолчанию
doubleдвойная
dottedпунктирная в точку
dashedпунктирная в линию
wavyволнистая
inherit Наследует значение родительского блока.
initial Устанавливает значение по умолчанию.

Поддержка браузерами

НастольныеМобильные
Chrome
Edge
Firefox
IE
Opera
Safari
Chrome
Firefox
Opera
Safari
Samsung
Android
text-decoration
1
12
1
3
3.5
1
18
4
10.1
1
1.0
≤37
blink
⚠️ устарело
нет
нет
1-23
нет
4-15
нет
нет
4-23
10.1-14
нет
нет
нет
Короткая запись
57
79
36
6
нет
44
8 -webkit-
57
36
6
43
8 -webkit-
7.0
57
text-decoration-thickness в короткой записи
⚠️ эксперимент.
⚠️ нестандартное
нет
нет
70
нет
нет
нет
нет
нет
нет
нет
нет
нет
Поддерживается: Да Нет Частично
Получай полезные материалы удобным способом!
Добавить комментарий