2024-10-20

横に動く下線

ホバーCSSのみテキストリンクで使える

Text Text

ホバーで下線が左から右へ流れるように動くアニメーションです。

実装のポイント

下線は疑似要素で表現しています。通常状態の::before疑似要素とホバー時の::after疑似要素をつくり、opacityをホバー時に切り替えることで表示を変えています。

作例では文字が大きいので下線の太さを4pxとしていますが、テキストサイズに合わせて調整してください。下線はbackground-imageプロパティで塗りつぶしと透明の背景を作り、背景サイズを2倍の長さにしています。これをbackground-positionプロパティのアニメーションで下線が動いているように見せています。

コード例

<p class="sampleText">Text Text</p>

.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;
  }
}

横に動く下線

実装のポイント

コード例

HTML

CSS

関連作例