Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration
- 18 января 2022
- 1 мин
- 6 978
В HTML есть несколько тегов, которые помогают обратить внимание на текст — подчеркнуть, выделить его или акцентировать на чём-то внимание. У таких тегов есть стили по умолчанию, и к некоторым из них мы давно привыкли.
Например, мы знаем, что обычно все ссылки на сайте подчёркнуты, текст внутри тега <del>
никому не нужен перечёркнут, а всё, что находится внутри тега <mark>
, выделено жёлтым цветом.

Но с помощью text-decoration
текст можно даже подчеркнуть сверху (что? да!). Давайте разберёмся, как это сделать.
Свойство text-decoration
Значения text-decoration
:
line-through
— зачёркивание посередине текста;overline
— надчёркивание, над текстом;underline
— подчёркивание, под текстом;none
— не используется декор;inherit
— наследуется.
Например, свойство для подчёркнутого текста записывается просто как
.underline-text {
text-decoration: underline;
}
text-decoration
— это сокращённая форма записи для набора CSS-свойств text-decoration-line
, text-decoration-color
, text-decoration-style
и text-decoration-thickness
. Перечисленные свойства используются для более тонкой настройки параметров подчёркивания.
text-decoration-line
text-decoration-line
— отвечает за тип линии: подчёркнуто, перечёркнуто, без подчёркивания, подчёркивание над текстом, а не под ним.
text-decoration-line: underline; /* обычное подчёркивание */
text-decoration-line: line-through; /* текст перечёркнут */
text-decoration-line: overline; /* подчёркивание над текстом */
text-decoration-line
может принимать сразу несколько значений, например, text-decoration-line: underline line-through;
. В этом случае у текста будет подчёркивание и зачёркивание.

text-decoration-color
text-decoration-color
управляет цветом подчёркивания. По умолчанию он, то есть цвет подчёркивания, совпадает с цветом текста.
<style>
.red-line {
text-decoration: underline dotted red;
}
</style>
<p class="red-line">Красная пунктирная линия</p>

text-decoration-style
Стиль линии (сплошная, волнистая, точками, тире и другие) настраивается через CSS-свойство text-decoration-style
.
solid
— обычная сплошная линия;double
— двойная линия;dotted
— пунктирная линия (пунктир из точек);dashed
— тоже пунктирная линия, но пунктир из коротких линий;wavy
— волнистая линия.

text-decoration-thickness
text-decoration-thickness
задаёт толщину линии.
text-decoration-thickness: 5px;

text-underline-offset
До недавнего времени внешним видом подчёркивания управляли только эти четыре CSS-свойства (text-decoration-line
, text-decoration-color
, text-decoration-style
и text-decoration-thickness
). Но были ситуации, когда перечисленных свойств было недостаточно. К примеру, нужно реализовать выделение активного пункта меню на сайте:

Если использовать только text-decoration
, нужное подчёркивание не реализовать. Его, конечно, можно добавить за счёт нижней границы, стилизации через псевдоэлементы или другими странными методами.
Но всё упростилось с появлением text-underline-offset
. Свойство устанавливает смещение подчёркивания от его исходного положения и используется в связке со свойством text-decoration
.
<li class="site-navigation-item">
<a class="site-navigation-link active">Каталог</a>
</li>
.active {
color: #ffffff;
text-decoration: underline;
text-decoration-color: #ffffff;
/* Смещаем подчёркивание на 15 пикселей вниз */
text-underline-offset: 15px;
text-decoration-thickness: 3px;
}
У свойства text-underline-offset
хорошая браузерная поддержка, оно работает в большинстве современных браузеров, кроме Firefox под Android.
Как узнать параметры нестандартного подчёркивания
Все параметры для подчёркивания будем доставать из макета в Figma.
Нам нужны два параметра — расстояние от текста до линии и толщина линии. Цвет подчёркивания обычно совпадает с цветом текста, поэтому специально искать этот параметр обычно не нужно.
Расстояние от текста до линии
Чтобы измерить расстояние между объектами, достаточно выбрать первый объект, нажать Alt/Option
и навести на второй. Выделяем текстовый слой и с зажатой клавишей Alt/Option
наводим курсор мыши на линию подчёркивания. В тултипе оранжевого цвета выводится количество пикселей между текстом и объектом, на который навели. В нашем случае — это значение 20
.

Запишем это значение в CSS-свойство text-underline-offset
:
.site-nav-item {
color: #ffffff;
text-decoration: underline;
/* Смещаем подчёркивание на 20 пикселей вниз */
text-underline-offset: 20px;
}
Толщина линии подчеркивания
Выделим объект с подчёркиванием. После этого на панели справа, на вкладке Inspect найдём свойства объекта. Нас интересует свойство Height (высота).

Свойство отображается и в разделе Properties, и в разделе Code. В примере толщина подчёркивания — 4 пикселя. Напомним, в CSS толщиной подчёркивания управляет свойство text-decoration-thickness
. Допишем в правило определение толщины подчёркивания:
.site-nav-item {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 20px;
/* Толщина подчёркивания — 4 пикселя */
text-decoration-thickness: 4px;
}
На этом всё — пробуйте, экспериментируйте и изучайте вёрстку, а мы вам в этом поможем.
Что ещё сделать своими руками
Ещё из рубрики «Статьи»
Что такое CMS и как под них верстать
И что это вообще за системы управления контентом?
Как составить план развития: неочевидные советы
Как расти по плану, а без плана не расти.
Как одновременно работать, учиться и не сойти с ума
«…с тайм-менеджментом я не очень дружу: всё делаю медленно, часто опаздываю». Узнали? Согласны?