Есть разные способы сделать тонкое подчёркивание. Расскажу о самых распространённых.
Современный подход — text‑decoration
За подчёркивание ссылок отвечает свойство text-decoration: underline. Именно им подчёркнуты ссылки на странице по умолчанию.
Дополнительные свойства вида text-decoration-* настраивают стандартное подчёркивание. Толщиной линии управляет text-decoration-thickness. Свойство появилось в ЦСС не сразу, но на 2023 год поддерживается во всех основных браузерах.
a {
text-decoration-thickness: .5px;
}
Этот способ самый простой и самый близкий к стандартному поведению браузера, а поэтому самый безопасный — сломать им что‑то в вёрстке почти невозможно.
Проблема в том, что стандартное подчёркивание из‑за маленького отступа от базовой линии букв выглядит так себе. И уменьшение толщины делает только хуже. Обычно стандартное подчёркивание не проходит дизайнерский ценз, его отключают и реализуют подчёркивание другими способами.
UPD: в комментариях подсказывают, что есть свойство text-underline-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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.