Подчеркивание ссылок другим цветом 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, обновлено 15.12.2022
1817

Комментарии

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

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

Перечёркивание текста по диагонали
Несколько примеров как зачеркнуть текст по диагонали с помощью псевдоэлементов CSS :before и :after.
14050
+3
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
59221
+7
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
42575
+34
Расстояние между буквами, строками, ширина табуляции в CSS
Демонстрация возможностей CSS для настройки расстояний между буквами, строками, табуляции и других свойств шрифтов.
23306
+1
Текст с градиентом
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
46290
+6
Как нарисовать точку в PHP GD
Примеры, как нарисовать точку в библиотеке PHP GD.
1966
+1