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

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;  /* 右下に配置 */
}