CSSだけで、テキストリンクのhover時にきれいなグラデーションアンダーラインの実装です。次のサンプルのブルーのテキストにhoverすると、それぞれ中心から両端にかけて色が薄くなるグラデーションのかかったアンダーラインを表示します。

「text-decoration: none」でデフォルトのアンダーラインを消し、hover時に「a:hover::after」でグラデーションアンダーラインを表示しています。また、表示の際にはアニメーション効果のフェードインをかけています。

サンプル

サンプルのhtmlソース

<div class="sample">
	<a href="#">WEB受注システム・百万石</a><br>
	<a href="#">0万石・在庫照会システム</a><br>
	<a href="#">定期配達・回収品管理システム</a>
</div> 

サンプルのCSSソース

.sample a {
	position: relative;
	display: inline-block;
	font-size: 44px;
	text-decoration: none;
	color: rgb(var(--link-color));
	}
.sample a:hover::after {
	content: "";
	display: block;
	position: absolute;
	top:58px;
	width: 100%;
	height: .09em;
	bottom: .1em;
	background-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(var(--link-color), .6) 30%,
		rgba(var(--link-color), .7) 50%,
		rgba(var(--link-color), .6) 70%,
		transparent 100%
	);
	opacity: 0;
	animation: fadeIn 400ms ease-out forwards;
	}
@keyframes fadeIn {
	100% {
		opacity: 1;
		}
	}