В 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;
Текст линия в 5 пикселей над текстом с линией в 5 пикселей над текстом.
5 пикселей — художественная условность :)

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;
}

На этом всё — пробуйте, экспериментируйте и изучайте вёрстку, а мы вам в этом поможем.


Что ещё сделать своими руками

Список задач

Список задач

Чтобы разобраться с JavaScript и перетаскиванием элементов.