<h1>Backgroundプロパティーを使うと</h1>
<div><a href="#">1行の場合:ホバーしてください。</a></div>
<div><a href="#">複数行の場合:ホバーしてください。複数行の場合:ホバーしてください。複数行の場合:ホバーしてください。複数行の場合:ホバーしてください。</a></div>
//形を整える
body {
	font-family: sans-serif;
	line-height: 1.8;
	h1 {
		margin-top: 20px;
		font-weight: bold;
		text-align: center;
	}
	div {
		max-width: 300px;
	   margin: 0 auto;
	   margin-top: 50px;
	   a {
		  text-decoration: none;
		  color: black;
	   }
	}
}

//ホバー時のアニメーション
a {
	padding-bottom: 5px;
	display: inline;
	background-image: linear-gradient(180deg, transparent 80%, #53739F 0);
	background-repeat: no-repeat;
   background-size: 0% 100%;
	transition: 1s;
}
a:hover {
	transition: 1s;
	background-size: 100% 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.