Как изменить цвет ссылки и убрать подчёркивание
Короткий ответ
Цвет задаёт color, подчёркивание убирает text-decoration: none:
<a href="#" style="color: seagreen; text-decoration: none;">A link without an underline</a>Подчёркивание при наведении
Так пользователь всё равно видит, что это ссылка:
<style>
.link { color: rebeccapurple; text-decoration: none; }
.link:hover { text-decoration: underline; }
</style>
<a class="link" href="#">Hover over me</a>Аккуратное подчёркивание
Подчёркивание можно не убирать, а сделать тоньше и отодвинуть от текста:
<style>
a { color: steelblue; text-decoration-thickness: 1px; text-underline-offset: 4px; }
</style>
<p>Read the <a href="#">delivery terms</a> before ordering.</p>Частая ошибка
Ссылку внутри текста оставляют без подчёркивания, а цвет делают почти как у текста. Тогда её не найти глазами, а людям с нарушением цветового зрения она вообще не видна. Убирайте подчёркивание только в меню и кнопках, где и так ясно, что элемент кликабелен:
<p>Read the <a href="#" style="color: #333; text-decoration: none;">delivery terms</a> before ordering.</p>Функции из этого ответа
- <a> — Ссылка на другую страницу, файл или место на странице.
- color — Цвет текста (а также цвет рамок и SVG-значков по умолчанию).
- text-decoration — Линии на тексте: подчёркивание, зачёркивание, надчёркивание.
- :hover — Срабатывает, пока над элементом находится указатель мыши.