text-decoration: подчёркивание и оформление линий
text-decoration задаёт декоративные линии у текста, включая подчёркивание ссылок и зачёркивание.
Назначение
text-decoration задаёт декоративные линии у текста, включая подчёркивание ссылок и зачёркивание.
Как это работает
Сокращённая запись объединяет тип линии, стиль и цвет. Толщину можно управлять через text-decoration-thickness, а отступ подчёркивания — через text-underline-offset.
Пример
<style>
a{text-decoration:underline solid #11694e;text-decoration-thickness:2px;text-underline-offset:.2em}
</style>
<p>Откройте <a href="#answer">ответ на вопрос</a>.</p><p id="answer">Ссылка сохраняет видимую линию.</p>Что должно получиться
Подчёркивание немного отдалено от букв и имеет заданную толщину. Декоративная линия не меняет адрес или поведение самой ссылки.
Граница применения и частая ошибка
Не убирайте подчёркивание у ссылок в сплошном тексте, оставляя единственным признаком небольшой цветовой сдвиг. Пользователь должен отличать переход от обычного слова.
Самостоятельная проверка
Сравните solid и dotted, затем уменьшите цветовой контраст. Проверьте, остаётся ли ссылка распознаваемой без цвета, и сохраняйте заметный фокус клавиатуры.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.