В 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-linetext-decoration-colortext-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 пикселей — художественная условность :)

text-underline-offset

До недавнего времени внешним видом подчёркивания управляли только эти четыре CSS-свойства (text-decoration-linetext-decoration-colortext-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;

  /* Тут определяем параметры для подчёркивания */

}

У свойства text-underline-offset хорошая браузерная поддержка, оно работает в большинстве современных браузеров, кроме Firefox под Android.

Как узнать параметры нестандартного подчёркивания

Все параметры для подчёркивания будем доставать из макета в Figma.

Нам нужны два параметра — расстояние от текста до линии и толщина линии. Цвет подчёркивания обычно совпадает с цветом текста, поэтому специально искать этот параметр обычно не нужно.

Расстояние от текста до линии

Чтобы измерить расстояние между объектами, достаточно выбрать первый объект, нажать Alt/Option и навести на второй. Выделяем текстовый слой и с зажатой клавишей Alt/Option наводим курсор мыши на линию подчёркивания. В тултипе оранжевого цвета выводится количество пикселей между текстом и объектом, на который навели. В нашем случае — это значение 20.

Запишем это значение в CSS-свойство text-underline-offset:

.active
  color: #ffffff;
  text-decoration: underline;
  /* Смещаем подчёркивание на 20 пикселей вниз */
  text-underline-offset: 20px;
}

Толщина линии подчеркивания

Выделим объект с подчёркиванием. После этого на панели справа, на вкладке Inspect найдём свойства объекта. Нас интересует свойство Height (высота).

Свойство отображается и в разделе Properties, и в разделе Code. В примере толщина подчёркивания — 4 пикселя. Напомним, в CSS толщиной подчёркивания управляет свойство text-decoration-thickness. Допишем в правило определение толщины подчёркивания:

.active {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 20px;
  /* Толщина подчёркивания — 4 пикселя */
  text-decoration-thickness: 4px;
}

А теперь давайте сравним с помощью расширения Perfect Pixel макет и полученную вёрстку.

Расхождением с Perfect Pixel
Расхождением с Perfect Pixel

Это произошло из-за того, что по умолчанию отступ отсчитывается от базовой линии текста, а Фигма показывает расстояние от нижней границы текстового блока.

💡 Базовая линия — эта линия на которой буквы «стоят». Она проходит по самому нижнему краю букв c плоской нижней частью.

Тонкая синяя линия по нижнему краю надписи
Тонкая синяя линия по нижнему краю надписи

Способов решить задачу (имеется в виду попасть в макет) несколько.

  1. Обновить границы слоя, чтобы они соответствовали базовой линии. Этот способ измерения предлагает сама Фигма в документации. В Фигме есть возможность текстовому блоку задать Fixed Size.

Но у этого способа есть минус. Если изменится размер шрифта, либо поменяется содержимое текстового блока, ломается раскладка макета. Это разрушительный для макета способ. Придётся высоту блоку заново устанавливать. Куда удобнее оставить автоматическую высоту для него.

  1. Использовать новое CSS-свойство text-underline-position со значением under. В этом случае базовая «нулевая» позиция будет установлена не по базовой линии, а по нижней границе блока, и text-underline-offset будет отсчитываться от того же базового положения, что и в редакторе Figma.
.active {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 20px;
  text-decoration-thickness: 4px;

  /* «Нулевая» позиция установлена по нижней границе блока */
  text-underline-position: under;
}

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Как работает :not() в CSS — исключаем элементы из стилей правильно

Как работает :not() в CSS — исключаем элементы из стилей правильно

Доступно в Baseline в статусе «Widely Available» с 2023-07-21

Псевдокласс :not() позволяет задать стили для всех элементов, кроме тех, что соответствуют определённому селектору. Это мощный инструмент, который делает CSS гибче, чище и избавляет от необходимости писать сложные конструкции или добавлять лишние классы в HTML.

Читать дальше
CSS
  • 20 июля 2025
Выбор цветов в CSS через hsl() и hsla()

Выбор цветов в CSS через hsl() и hsla()

CSS-функции hsl() и hsla() позволяют задавать цвета на основе восприятия человеком, а не машинной модели RGB. Это делает работу с цветами более гибкой и наглядной, особенно при создании адаптивных интерфейсов, тёмных тем или анимаций.

Читать дальше
CSS
  • 18 июля 2025
Как перекрыть один элемент другим. CSS-свойство z-index

Как перекрыть один элемент другим. CSS-свойство z-index

Свойство z-index в CSS отвечает за порядок наложения элементов на веб-странице. Оно определяет, какой элемент окажется сверху, а какой — будет скрыт под ним. Чем выше значение z-index, тем ближе к пользователю расположен элемент.

Читать дальше
CSS
  • 16 июля 2025
Единица измерения cap в CSS

Единица измерения cap в CSS

С 11 декабря 2023 года (Baseline: Newly Available) в CSS появилась новая единица измерения — cap. Она измеряет высоту заглавной латинской буквы в шрифте, установленном для элемента. Это значит, что теперь можно задавать размеры, отступы и позиционирование элементов не только в пикселях, em или rem, но и относительно визуальной высоты заглавных букв.

Эта единица особенно полезна при работе с крупными заголовками, адаптивной типографикой и точным выравниванием текста.

Читать дальше
CSS
  • 8 июля 2025
10 свойств в CSS о которых вы, вероятно, не знали

10 свойств в CSS о которых вы, вероятно, не знали

Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <margin>, <color>, <font-size> и может быть, <flex>. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.

Читать дальше
CSS
  • 22 июня 2025
Округление в CSS с функцией round()

Округление в CSS с функцией round()

Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.

Читать дальше
CSS
  • 22 июня 2025
focus-visible

focus-visible

Когда мы создаём сайты, мы хотим, чтобы ими было удобно пользоваться всем людям — и тем, кто управляет страницей с помощью мыши, и тем, кто использует клавиатуру. Например, человек с ограниченными возможностями зрения может перемещаться по элементам с помощью клавиши Tab.

Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.

Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули.

Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.

Читать дальше
CSS
  • 21 июня 2025
CSS font-palette: управление цветами шрифтов

CSS font-palette: управление цветами шрифтов

Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.

В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.

Цветной шрифтАльтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)

Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.

Читать дальше
CSS
  • 18 июня 2025
Как анимировать CSS Grids без JavaScript

Как анимировать CSS Grids без JavaScript

Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float, flex и position. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.

Да, grid-template-columns и grid-template-rows существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.

Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns и grid-template-rows вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents. Просто работает.

Читать дальше
CSS
  • 1 июня 2025
Все единицы измерения в CSS от лучших к худшим

Все единицы измерения в CSS от лучших к худшим

CSS использует разные единицы измерения для задания размеров, отступов, шрифтов и других свойств. Разделяют абсолютные и относительные единицы. Понимание различий между ними — фундаментальная основа адаптивной, масштабируемой и удобной в поддержке вёрстки.

Абсолютные:

  • px — пиксели
  • cm — сантиметры
  • mm — миллиметры
  • in — дюймы
  • pt — типографские пункты
  • pc — пика

Относительные:

  • z% — процент от родителя
  • em — от размера шрифта родителя
  • rem — от размера шрифта корня
  • vw — 1% от ширины вьюпорта
  • vh — 1% от высоты вьюпорта
  • vmin / vmax — минимальное/максимальное из vw и vh
  • fr — доля пространства в грид-сетке
  • ch — ширина символа «0»
  • ex — высота строчной буквы «x»

Примеры ниже снабжены пояснениями из практики, с фокусом на применение в реальных проектах.

Читать дальше
CSS
  • 30 мая 2025