Подчеркивание ссылок другим цветом CSS

CSS-свойство text-decoration-color устанавливает цвет линии, которая добавляется через свойство text-decoration. Толщина линии зависит от размера шрифта.

<a href="#">Ссылка с подчёркиванием</a>
HTML
a {
	text-decoration-skip-ink: none;
	text-decoration: underline;
	text-decoration-color: red;
}
a:hover {
	text-decoration-color: #f56666;
}
CSS

Пример:

Поддержка в браузерах:

Второй вариант – сделать подчеркивание с помощью нижней рамки:

<a href="#">Ссылка с подчёркиванием</a>
HTML
a {
	font-size: 16px;
	text-decoration: none;
	border-bottom: solid 2px red;
}
a:hover {
	border-bottom-color: #f56666;
}
CSS

Пример:

23.11.2022
165

Комментарии

, чтобы добавить комментарий.

Другие публикации

Проверка орфографии в браузере
В современных браузерах как правило есть модуль проверки орфографии в полях input, textarea и элементов с contenteditable=true.
941
0
Ссылки на мессенджеры с сайта
HTML ссылки для открытия чата и других функций популярных мессенджеров.
18731
+13
Стиль и размер ReCaptcha
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно следующими способами:
18410
+3
Добавление CSS стилей на страницу
Несколько примеров как добавить CSS-свойства к HTML странице.
3496
+2
СSS стили для горизонтальных линий
Сборник горизонтальных линий с тегом hr разных видов и стилей.
91009
+9
Верстка списка с отточием
Иногда возникает необходимость сверстать список характеристик товара в две колонки или содержание статьи. Чтобы улучшить восприятие текста такие списки разделяют линиями, в данной статье представлены...
7830
+2