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

<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>

<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>

.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);
}