Web制作で役立つメモをWEB MEMO LOG

2023.05.04

【CSS】下線の幅が変化するアニメーション設定(背景で下線設定)

マウスオーバー等で下線が変化するアニメーションを背景(background-image)で設定する方法。

a {
	background-image: linear-gradient(#2e2e2e, #2e2e2e); /* 単色 */
	background-size: 100% 1px; /* 幅(0=見えない状態) | 高さ(=線の太さ) */
	background-position: bottom left; /* 左下に配置 */
	background-repeat: no-repeat;
	padding-bottom: 5px;
	transition: background-size 0.4s ease-out , color 0.3s ease-out; /* 文字色追加 */
	box-decoration-break: slice; /* Firefox用に指定 */
	-webkit-box-decoration-break: slice; /* Firefox以外のブラウザ用に指定 */
}
a:hover {
	background-size: 0 1px; /* 幅(100%=文字の長さ) | 高さ(=線の太さ) */
	background-position: bottom right;  /* 右下に配置 */
}

【参考】CSSで下線を引く方法まとめ

About Site

同じことを何度も検索していたりするんで、検索して解決したことを残そうと思いまして。