横に動く下線
ホバーCSSのみテキストリンクで使える
Text Text
ホバーで下線が左から右へ流れるように動くアニメーションです。
実装のポイント
下線は疑似要素で表現しています。通常状態の::before
疑似要素とホバー時の::after
疑似要素をつくり、opacity
をホバー時に切り替えることで表示を変えています。
作例では文字が大きいので下線の太さを4px
としていますが、テキストサイズに合わせて調整してください。下線はbackground-image
プロパティで塗りつぶしと透明の背景を作り、背景サイズを2倍の長さにしています。これをbackground-position
プロパティのアニメーションで下線が動いているように見せています。
コード例
HTML
<p class="sampleText">Text Text</p>
CSS
.sampleText {
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
display: inline-flex;
position: relative;
z-index: 0;
&::after,
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px; /* 下線の太さ */
z-index: -1;
background-image: linear-gradient(
90deg,
currentColor 0%,
currentColor 50%,
transparent 50%,
transparent 100%
);
background-size: 200% 4px; /* 下線の太さ */
background-position: 0 0;
transition: opacity 0.5s var(--ease-out-quart);
}
&::before {
opacity: 1;
}
&::after {
opacity: 0;
animation-name: borderAnimation;
animation-duration: 0.75s;
animation-timing-function: var(--ease-in-out-quart);
animation-iteration-count: infinite;
}
}
@media (any-hover: hover) {
.sampleText:hover {
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
}
}
@keyframes borderAnimation {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}