Задаём цвет подчёркивания ссылок в CSS

«Как красиво оформить ссылки на сайте?» – такой вопрос часто встаёт перед веб мастером в процессе форматирования страниц. Стильно оформленные ссылки на странице привлекают внимание посетителей к анализу информации заключённой в ней и мотивируют к действию перехода по ссылке. Конечно, основную роль играет смысловой фактор, правильно подобранные анкоры и около ссылочный текст. Но всё же стилизация самой ссылки серьёзно усиливает вектор мотивации к переходу по ссылке. Эффект привлечения внимания к себе используется в живой природе. Например, цветы своей многоцветной палитрой привлекают к сбору нектара пчёл и так осуществляют необходимое опыление. И наоборот, когда нужно отвести внимание от своей персоны, цвета объекта могут подстраиваться под окружающую среду. В случае с ссылками всё аналогично. Бывают ситуации когда нам необходимо явно выделить ссылку из текста по какому-либо признаку, например изменить её цветовую палитру и наоборот заставить ссылку принять стиль применяемый в около ссылочном тексте.

Для HTML ссылок как правило используются парные теги <a> текст </a>. По умолчанию ссылки имеют стандартное форматирование – синий цвет текста с подчёркиванием. Такого оформления ссылки часто бывает недостаточно для явного увеличения значимости информации ведущей по ней. Например, это может быть обязательный к прочтению документ договора или правил оказания услуг. Одним из способов определить значимость информации может быть изменение цвета подчёркивания текста ссылки. Существуют два способа решения задачи.

CSS свойство text-decoration-color

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

<a href="#">Ссылка с подчёркиванием</a>

a {
	text-decoration-skip-ink: none;
	text-decoration: underline;
	text-decoration-color: red;
}
a:hover {
	text-decoration-color: #f56666;
}

CSS свойство border-bottom

Второй вариант - CSS-свойство border-bottom - задать цвет нижней грани рамки вокруг текста. Дополнительно устанавливает ширину и тип линии.

a {
	font-size: 16px;
	text-decoration: none;
	border-bottom: solid 2px red;
}
a:hover {
	border-bottom-color: #f56666;
}

Как видно на демонстрации – визуально результат подчёркивания практически одинаков, но в случае с нижней границей рамки можно ещё задать толщину и тип линии подчёркивания независимо от размеров текста.

ТОП 10 случайных публикаций