text-underline-offset: расстояние до подчёркивания
Свойство text-underline-offset управляет расстоянием между текстом и его подчёркиванием. Оно помогает сделать ссылку читаемой, не заменяя подчёркивание рамкой у всего блока.
Назначение
Свойство text-underline-offset управляет расстоянием между текстом и его подчёркиванием. Оно помогает сделать ссылку читаемой, не заменяя подчёркивание рамкой у всего блока.
Как это работает
Сначала включите text-decoration-line: underline, затем задайте отступ. Значение в em связано с размером шрифта. Само свойство не включает линию и не управляет зачёркиванием.
Пример
<style>.reading-link{color:#075f49;text-decoration-line:underline;text-underline-offset:.2em;text-decoration-thickness:.08em}.reading-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}</style>
<p><a class="reading-link" href="#lesson">Перейти к учебному примеру</a></p>
<h2 id="lesson">Учебный пример</h2>Что должно получиться
У ссылки появляется небольшой зазор до линии. Подчёркивание остаётся связано с текстом, включая переносы, а клавиатурный фокус показан отдельным контуром.
Граница применения и частая ошибка
Большой отступ может приблизить линию к следующей строке или привести к её обрезанию контейнером. Не удаляйте подчёркивание только ради минималистичного вида, если ссылки в абзаце иначе различаются лишь цветом.
Самостоятельная проверка
Сравните шрифты с разными нижними выносными элементами, увеличьте масштаб и сократите ширину абзаца. Убедитесь, что линия не мешает буквам следующей строки и ссылка различима без наведения мыши.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.