Подчеркивание текста линией с градиентом

Подчеркивание текста можно сделать с помощью нескольких свойств CSS3.

background-image: linear-gradient(to right, red, blue); Устанавливает цвет и направление градиента
background-size: 100% 1px; Высота линии
background-position: center bottom 2px; Смещение от низа
1

Ссылки

<p>Пример <a href="#" class="a-gradient">ссылки с подчеркиванием градиентом</a> в тексте.<p>

<style>
.a-gradient {
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: center bottom 1px;
	background-size: 100% 1px;
	background-image: linear-gradient(to right, red, blue);
}
.a-gradient:hover {
	background-image: linear-gradient(to right, blue, black);
}
</style>
HTML
2

Заголовки

Заголовки H1, H2 и т.д. придется обворачивать в <div> т.к. свойство display: inline у элемента обязательно.

<div class="h1-gradient">
	<h1>Большой заголовок, подчеркнутый линией с градиентом</h1>
</div>

<style>
.h1-gradient {
	margin: 0 0 20px 0;
}
.h1-gradient h1 {
	display: inline;
	background-repeat: no-repeat;
	background-position: center bottom 1px;
	background-size: 100% 3px;
	background-image: linear-gradient(to right, red, blue);
}
</style>
HTML

Также можно поменять направление градиента на вертикальный:

.h1-gradient h1 {
	display: inline;
	background-repeat: no-repeat;
	background-position: center bottom 1px;
	background-size: 100% 5px;
	background-image: linear-gradient(to top, #fff, #000);
}
CSS
31.07.2018, обновлено 28.08.2019 997

Поделится

Темы

CSS HTML

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

С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по...
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
Сборник CSS стилей с эффектом фильтров Инстаграма.
Smarty это компилирующий обработчик шаблонов для PHP позволяющий отделить логику и HTML-верстку веб-приложения.
Первыми тегами для зачёркнутого текста были strike и s. C приходом HTML 4 их использование стало осуждается, а в HTML 5...
В статье приведен пример формы и php скрипта для безопасной загрузки файлов на сервер, метод отправки файлов через...