text-decoration-thickness: толщина подчёркивания ссылки
Text-decoration-thickness управляет толщиной линии текстового оформления. Оно помогает настроить подчёркивание так, чтобы ссылка оставалась заметной и линия не заслоняла буквы.
Назначение
Text-decoration-thickness управляет толщиной линии текстового оформления. Оно помогает настроить подчёркивание так, чтобы ссылка оставалась заметной и линия не заслоняла буквы.
Как это работает
Можно использовать auto, from-font или собственную величину. Значение в em связано с размером текста. Offset настраивается отдельно, поэтому толщина и расстояние линии от букв не следует смешивать.
Пример
<style>.thick-link{text-decoration-line:underline;text-decoration-thickness:.12em;text-underline-offset:.2em;color:#1e6241}.thick-link:focus-visible{outline:2px solid #174ea6;outline-offset:3px}</style>
<p><a class="thick-link" href="#thickness-note">Перейти к пояснению</a></p><p id="thickness-note">Толщина линии масштабируется вместе с текстом.</p>Что должно получиться
Ссылка имеет подчёркивание заданной толщины и заметный фокус. Текст остаётся обычной рабочей ссылкой; оформление не заменяет корректный адрес и понятное название.
Граница применения и частая ошибка
Слишком толстая линия может мешать чтению нижних частей букв. Не убирайте все нецветовые признаки ссылки в обычном тексте. From-font зависит от шрифта, а не гарантирует одинаковую линию во всех семействах.
Самостоятельная проверка
Сравните auto, from-font и значение в em на двух шрифтах. Увеличьте масштаб и проверьте многострочную ссылку. Убедитесь, что фокус не сливается с подчёркиванием и остаётся видимым.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.