<h1>普通のやり方</h1>
<div><a href="#">1行の場合:ホバーしてください。</a></div>
<div><a href="#">複数行の場合:ホバーしてください。複数行の場合:ホバーしてください。複数行の場合:ホバーしてください。複数行の場合:ホバーしてください。</a></div>
//形を整える
body {
	font-family: sans-serif;
	line-height: 1.6;
	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 {
	display: inline-block;
	&:after {
		content: "";
		width: 0%;
		display: block;
		border-bottom: solid 3px #53739F;
	}
}
a:hover:after {
	transition: 1s;
	width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.