リンクテキストに付くアンダーラインをグラデーションにします。サンプルは、aタグに自動で付くアンダーラインを「text-decoration: none」で消し、bottomのみに3pxのボーダーを付けてアンダーラインの代わりにします。このボーダーに「border-image:」でグラデーションを指定します。hoverで文字色とグラデーションを変更しています。

サンプル（リンクはダミーです）

サンプルのhtmlソース

<div class="sample">
    <a href="#">サンプルテキスト</a>
    既存の販売管理、<a href="#">基幹システム</a>とのデータ連携が可能です。<br>
    <a href="#">概要説明</a>、<a href="#">操作マニュアル発注側、管理側</a>を参照してください。<br>
    システムの<a href="#">資料請求はこちら</a>です。
</div>

サンプル（１）のCSSソース

.sample a {
	color: #26c;
	text-decoration: none;
	padding:0 0 2px 0;
	border: 0;
	border-bottom: 3px solid;
	border-image: linear-gradient(to right, rgb(80, 180, 255), rgb(180, 230, 255));
	border-image-slice: 1;
	}	
.sample a:hover {
	color: #d37;
	border-image: linear-gradient(to right, rgb(180, 100, 255), rgb(240, 200, 255));
	border-image-slice: 1;
	}