タイトルの通り、リンク等のテキストにマウスオーバーした際、アンダーラインがニョキッと出てくるアニメーションの作り方を紹介します。

簡単に作れる割には凝った雰囲気が醸し出せるので、ブログにちょっとしたアクセントを付けたい人にオススメです。

左から伸びてくるアンダーライン

まずは左から伸びてくるアンダーラインです。

完成品

See the Pen Underline_1 by Leo_8192 (@Leo_8192) on CodePen.

CSS

※アンダーライン部分に関係ないfont-size等はいくつか省略しています。

a{
	position: relative;
	text-decoration: none;
	color: #1075ff;
	transition: 0.3s;
}
a:hover{
	color: #0055df;
}
a::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 4px;
	background: #e45858;
	transition: 0.3s;
}
a:hover::before{
	width: 100%;
}

下線部分を疑似要素（::before）を使って再現し、hover時にwidth:100%;にすることによって左からヌルっと線が伸びてくるアニメーションが作れます。

中央から伸びてくるアンダーライン

今度は中央から伸びてくるverです。

完成品

See the Pen Underline_2 by Leo_8192 (@Leo_8192) on CodePen.

CSS

※先程のコードと異なる部分をハイライトしています。

a{
	position: relative;
	text-decoration: none;
	color: #1075ff;
	transition: 0.3s;
}
a:hover{
	color: #0055df;
}
a::before{
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 0;
	height: 4px;
	background: #e45858;
	transition: 0.3s;
}
a:hover::before{
	left: 0;
	width: 100%;
}

ホバーする前はleft:50%;、ホバーしたらleft:0;に移動させることで中央から線が伸びているように見せることができます。scale()を使う方法もあるんですが、見た目は同じ挙動なので省略。

点線も作れる

repeating-linear-gradientを使えば点線を作ることも可能です。

完成品

See the Pen Underline_2 by Leo_8192 (@Leo_8192) on CodePen.

CSS

アンダーライン部分はbackgroundで色を付けているので、そこにrepeating-linear-gradientを指定してあげればOKです。

a{
	position: relative;
	text-decoration: none;
	color: #1075ff;
	transition: 0.3s;
}
a:hover{
	color: #0055df;
}
a::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 4px;
	background: repeating-linear-gradient(90deg, #e45858, #e45858 5px, transparent 5px, transparent 8px);
	transition: 0.3s;
}
a:hover::before{
	width: 100%;
}

その他

今回は紹介していませんが、backgroundにlinear-gradientを使えばグラデーションの掛かった下線も作れますし、::afterでもう一つ疑似要素を作れば上下に線を付けることも可能です。

ただ、あんまり派手に装飾してしまうとちょっとウザいので、軽いアクセント程度に留めるのがオススメです。