Как подчеркнуть текст и настроить подчёркивание
Короткий ответ
Подчёркивание включает text-decoration: underline:
<p style="text-decoration: underline;">Underlined text</p>Настроить линию
Цвет, толщину, стиль и расстояние от текста можно задать отдельно:
<style>
.fancy { text-decoration: underline; text-decoration-color: tomato; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.wavy { text-decoration: underline wavy crimson; }
.dotted { text-decoration: underline dotted; }
</style>
<p class="fancy">Thick tomato underline</p>
<p class="wavy">Wavy like a spelling error</p>
<p class="dotted">Dotted underline</p>text-underline-offset отодвигает линию от букв, чтобы она не пересекала хвостики «g» и «y».
Ссылки
Подчёркивание ссылки обычно не убирают совсем, а делают аккуратнее и показывают ярче при наведении:
<style>
.link { color: navy; text-decoration-color: lightsteelblue; text-underline-offset: 3px; }
.link:hover { text-decoration-color: navy; }
</style>
<a class="link" href="https://example.com">Read more</a>Частая ошибка
Подчёркивать обычный текст, который не является ссылкой. Люди привыкли, что подчёркнутое можно нажать, и будут пытаться это сделать. Для выделения используйте жирный шрифт или цвет, а подчёркивание оставьте ссылкам.
Функции из этого ответа
- text-decoration — Линии на тексте: подчёркивание, зачёркивание, надчёркивание.
- <a> — Ссылка на другую страницу, файл или место на странице.
- :hover — Срабатывает, пока над элементом находится указатель мыши.