Подчеркивание текста — это классический способ выделения важных элементов на веб-странице. Однако стандартное подчеркивание, создаваемое с помощью свойства text-decoration: underline, часто выглядит слишком близко к тексту, что может ухудшать читаемость или эстетику. В этой статье мы рассмотрим, как с помощью современных возможностей CSS можно настроить подчеркивание, добавив к нему отступы, чтобы сделать его более стильным и удобным для восприятия.

Проблема стандартного подчеркивания

При использовании свойства text-decoration: underline подчеркивание располагается вплотную к нижней части букв. Это особенно заметно для символов с нижними выносными элементами, таких как «р» или «у», где линия подчеркивания может пересекать эти элементы, создавая визуальные обрывания.

Современные браузеры поддерживают расширенные возможности свойства text-decoration, которые позволяют настроить стиль подчеркивания. В частности, можно использовать свойство text-decoration-skip-ink для управления поведением линии при пересечении символов. Свойство:

text-decoration-skip-ink: none;

позволяет подчеркивать текст по всей длине содержимого, включая части, пересекающие выносные элементы глифов.

Однако для добавления отступов нам понадобится другой подход, основанный на свойстве text-underline-offset.

Использование text-underline-offset

Свойство text-underline-offset позволяет задать расстояние между текстом и линией подчеркивания. Оно поддерживается во всех современных браузерах и является простым способом улучшить внешний вид подчеркивания. Вот пример кода:

.underline {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

В этом примере линия подчеркивания будет отображаться на расстоянии 0.25em ниже текста. Вы можете настроить значение свойства в пикселях, процентах или других единицах, чтобы добиться желаемого результата.

Дополнительная настройка стиля

Для большей выразительности можно комбинировать text-underline-offset с другими свойствами, такими как text-decoration-color и text-decoration-thickness.

Альтернативный подход с использованием псевдоэлементов

Если вам нужно еще больше контроля над подчеркиванием, можно использовать псевдоэлемент ::after для создания кастомной линии. Этот метод сложнее, но он предоставляет полную свободу в настройке стиля. Пример:

.custom-underline {
  position: relative;
  text-decoration: none; /* Убираем стандартное подчеркивание */
}

.custom-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px; /* Расстояние от текста */
  width: 100%;
  height: 2px; /* Толщина линии */
  background-color: #28a745; /* Цвет линии */
}

Заключение

Добавление отступов для подчеркивания текста - это простой способ улучшить дизайн веб-страницы. Используя свойство text-underline-offset, вы можете быстро настроить расстояние между текстом и линией подчеркивания, сохраняя код минималистичным. Для более сложных задач подойдут псевдоэлементы, которые позволяют создавать полностью кастомизированные линии, однако требующие более внимательной верстки. Выбирайте подход в зависимости от ваших целей и требований к поддержке браузеров, чтобы добиться оптимального результата.