Стиль в деталях: как перестать мучить ссылки и начать жить с text-underline-offset
Признайся, сколько раз ты ругался с дизайнером из-за того, что стандартное подчеркивание в браузере выглядит «грязным»? Линия пересекает хвостики букв «g», «j», «p», сливается с текстом и превращает аккуратный интерфейс в кашу. Раньше мы выкручивались как могли, создавая десятки строк лишнего кода ради одного пикселя отступа. Но в 2026 году пора забыть про костыли. Сегодня разберем свойство text-underline-offset — маленькую деталь, которая отделяет верстку джуна от работы профессионала.
Как мы страдали раньше
До появления современных свойств у нас было два пути, и оба вели в тупик. Первый — оставить text-decoration: underline как есть. Но это выглядело дешево, потому что линия вплотную прилипала к базовой линии шрифта.
Второй путь — «хак через border». Мы отключали стандартное подчеркивание и вешали border-bottom. Вроде бы победа: можно регулировать отступ через padding-bottom. Но как только ссылка переносилась на новую строку, все ломалось. Бордер рисовался только у нижней строки или создавал странные разрывы. А если нужно было изменить толщину линии, приходилось воевать с каскадом. Кстати, если ты до сих пор путаешься в приоритетах стилей, советую почитать, как правильно работать со специфичностью каскада, чтобы твои кастомные ссылки не перебивались системными стилями.
Как делать правильно в 2026 году
Сейчас для идеальной ссылки нам нужно всего три свойства, которые работают нативно и поддерживают многострочность. Главный герой здесь — text-underline-offset. Оно позволяет отодвинуть линию подчеркивания от текста на любое расстояние. В паре с ним идет text-decoration-thickness, которым мы задаем точную толщину линии, не полагаясь на «авто» значение браузера.
Но настоящий шик — это text-decoration-skip-ink. По умолчанию оно включено (значение auto) и заставляет линию «прерываться» там, где проходят выносные элементы букв (те самые хвостики у «у» или «д»). Это делает чтение плавным, а интерфейс — дорогим. И не забудь, что при стилизации ссылок важно сохранять их доступность. Посмотри, как работает доступность интерфейсов с псевдоклассом :focus-visible, чтобы твои красивые ссылки были удобны и для тех, кто пользуется клавиатурой.
Готовый сниппет кода
Вот как выглядит современный стандарт стилизации ссылок. Минимум кода, максимум эстетики:
.expert-link {
text-decoration: underline;
/* Цвет линии, можно использовать текущий цвет текста */
text-decoration-color: currentColor;
/* Устанавливаем толщину линии */
text-decoration-thickness: 1.5px;
/* Магия: отодвигаем линию от текста */
text-underline-offset: 0.25em;
/* Разрешаем линии прерываться под буквами */
text-decoration-skip-ink: auto;
transition: text-underline-offset 0.3s ease;
}
.expert-link:hover {
/* Интерактив: на ховере линия эффектно опускается чуть ниже */
text-underline-offset: 0.4em;
}
Частая ошибка новичков
Самый популярный фейл — использование фиксированных единиц (px) для text-underline-offset в глобальных стилях. Если пользователь увеличит размер шрифта в браузере или ты изменишь font-size для мобилки, твой отступ в 3px превратится в тыкву: он будет либо слишком маленьким, либо непропорционально огромным.
Всегда используй относительные единицы (em). Значение 0.1em или 0.2em всегда будет выглядеть гармонично, потому что оно привязано к размеру шрифта конкретной ссылки. Так ты сохранишь вертикальный ритм и не сломаешь верстку при масштабировании.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!