《CSS》hover時に線が伸びるアニメーション

公開日：2024年03月06日　最終更新日：2024年3月6日

CSS

hoverすると下線が伸びるアニメーション。
::beforeでグレーの線、::afterで伸びる線を作成しています。

DEMO

HTML

<a class="link" href="#">リンク</a>

CSS

left: 0をright:0にすると右からのアニメーションに変化します。

.link {
	color: #111;
	position: relative;
	text-decoration: none;
}
.link::before {
	background: #dbd9d9;
	bottom: -5px;
	content: '';
	display: block;
	height: 1px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: -1;
}
.link::after {
	background: #cf5747;
	bottom: -5px;
	content: '';
	display: block;
	height: 1px;
	left: 0;
	position: absolute;
	transition: all .4s ease-in-out;
	width: 0;
	z-index: 0;
}
.link:hover::after {
	width: 100%;
}