Есть разные способы сделать тонкое подчёркивание. Расскажу о самых распространённых.

Современный подход без хитростей — text‑decoration‑thickness

За подчёркивание ссылок отвечает свойство text-decoration: underline. Именно им подчёркнуты ссылки на странице по умолчанию.

Дополнительные свойства вида text-decoration-* настраивают стандартное подчёркивание. Толщиной линии управляет text-decoration-thickness. Свойство появилось в ЦСС не сразу, но на 2023 год поддерживается во всех основных браузерах.

a {
  text-decoration-thickness: .5px;
}

Этот способ самый простой и самый близкий к стандартному поведению браузера, а поэтому самый безопасный — сломать им что‑то в вёрстке почти невозможно.

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

UPD: в комментариях подсказывают, что есть свойство text-decoration-offset, управляющее отступом подчёркивания от базовой линии. Это убирает основной недостаток text-decoration и, похоже, делает его самым простым и удобным способом подчёркивания :‑)

Нестареющая классика — border‑bottom

Распространённый способ сделать нестандартное подчёркивание — через нижнюю границу элемента, свойством border-bottom. Элемент обязательно должен быть инлайновым (строчным).

a {
  /* Отключаем стандартное подчёркивание */
  text-decoration: none;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
}

Если не указывать цвет границы, она будет цвета текста.

Способ заслуженно любим и повсеместно встречается в вебе. Простой и наглядный код даёт довольно надёжный и аккуратно выглядящий результат.

Трюк с градиентом — background‑image и linear‑gradient

Подчёркивание градиентом громоздкое и не особо понятное в коде. Зато так можно управлять отступом подчёркивания от базовой линии текста. Именно этот способ используется на сайте бюро.

Создаём линию с помощью градиента и смещаем на нужный отступ от базовой линии. Элемент обязательно должен быть инлайновым (строчным).

a {
  /* Отключаем стандартное подчёркивание */
  text-decoration: none;
  background-image: linear-gradient(to bottom, rgba(0, 0, 200, .25) 0, rgba(0, 0, 200, .25) 100%);
  background-size: .5px .5px;
  background-position: 0 90%;
}

Кроме громоздкости, есть ещё значительный недостаток: изменение цвета градиента нельзя анимировать свойством transition. Плавно менять цвет ссылки при наведении не получится. Впрочем, в хорошем интерфейсе элементы и должны реагирововать мгновенно, следуя принципам мгновенной и непрерывной обратной связи :‑)

Ещё занятный нюанс: таким способом нельзя перекрасить подчёркивание посещённых ссылок — background-image, как и многие другие свойства, не работает с селектором a:visited. Это сделано для защиты приватности, чтобы никакими трюками с отслеживающими ссылками или проверкой стилей посещённой ссылки нельзя было узнать, на какие ещё сайты заходил посетитель сайта.

Есть и другие варианты подчёркивания разной степени экзотичности, вплоть до подчёркивания Яваскриптом. Поделитесь в комментариях, если использовали какой‑нибудь интересный способ для решения своих задач.

Бонус‑трюк! Визуальное «облегчение» подчёркивания без изменения толщины

Напоследок поделюсь трюком, который мне когда‑то показал Миша Нозик: уменьшите прозрачность линии и она будет казаться тоньше. Трюк неплохо сочетается со стандартным подчёркиванием: мы сохраняем простоту и надёжность стандартного подчёркивания, при этом делаем его не таким навязчивым.

a {
  text-decoration-color: rgba(0, 0, 200, .15);
}

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы