横に動く下線
ホバーCSSのみテキストリンクで使える
Text Text
ホバーで下線が左から右へ流れるように動くアニメーションです。
実装のポイント
下線はbackground-imageプロパティで塗りつぶしと透明の背景を作り、背景サイズを2倍の長さ、縦を4pxにしています。作例では文字が大きいので下線の太さを4pxとしていますが、テキストサイズに合わせて調整してください。background-positionの値を0 100%にし、要素の下部に来るようにしています。padding-bottomの値でテキストからの距離を調整できます。
ホバー時にはbackground-positionプロパティのアニメーションを実行させ、下線が動いているように見せています。
コード例
HTML
<p class="sampleText">Text Text</p>
CSS
.sampleText {
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
background-image: linear-gradient(
90deg,
var(--color-text) 0%,
var(--color-text) 50%,
transparent 50%,
transparent 100%
);
background-size: 200% 4px;
background-repeat: no-repeat;
background-position: 0 100%;
padding-bottom: 2px;
}
@media (any-hover: hover) {
.sampleText:hover {
animation-name: borderAnimation;
animation-duration: 0.75s;
animation-timing-function: var(--ease-in-out-quart);
animation-iteration-count: infinite;
}
}
@keyframes borderAnimation {
0% {
background-position: 100% 100%;
}
100% {
background-position: -100% 100%;
}
}
編集履歴
- 2024/11/25 2行になった場合に下線がうまく表示できないため、
background-imageを用いた方式に変更しました。