下線が引かれるテキスト

概要

ホバーすると下線が引かれるアニメーションです。

下線のアニメーションは擬似要素で対応することもできますが、テキストが複数行になった場合に1行目に下線が引かれなかったり、意外と崩れたりします。

text-decorationを使うこともできますが、これだと線が引かれるアニメーションはできず、フェードインする程度が限界です。

紹介している方法だと、複数行も線がシュッと引かれる様子も対応が可能です。

具体的な方法は、線を引きたい対象にbackgroundで背景を設定します。
背景の設定方法がキモでliner-gradientを使って、グラデーションのx方向に対して50%までは色つき、50%以降は透明とします。

その背景を要素の200%以上の大きさにすることで、左半分は要素の大きさ分色がついたエリア、右半分は要素の大きさ分透明なエリアを作ります。（この時、repeatはx方向のみにします。）

そして、デフォルトの位置をbackground-positionで右下にすることで、最初は透明なエリアが表示され、ホバー時に位置を左下に動かすことで、左からシュッと線が引かれるようにしています。

※サンプルでは、linear-gradientの角度を少しずらすことで、線の先端を微妙に尖らせスタイリッシュにしています。それに合わせて、要素の大きさも200%ではなく、210%にしています。（200%だと先端がデフォルトで見えてしまう。）

<p class="text-wrapper">
  <span class="text">TEXT TEXT TEXT TEXT</span>
</p>

/* 複数行にするためにラッパーで囲む */
.text-wrapper {
  max-width: 9em;
  text-align: center;
}
/* テキストのCSS */
.text {
  /* 線を引く */
  background-image: linear-gradient(120deg, currentColor 50%, transparent 50%);
  /* 繰り返し方法（y方向には繰り返さない） */
  background-repeat: repeat-x;
  /* 配置位置（x=100%, y=100% → 要素の右下基準） */
  background-position: 100% 100%;
  /* サイズ（横210% / 縦0.1emに拡縮） */
  background-size: 210% 0.1em;
  /* 背景画像の配置位置を変更させる */
  transition: background-position 0.4s;
  will-change: background-position;
}
/* ホバーした時の動き */
.text:hover {
  /* 配置位置（x=0%, y=100% → 要素の左下基準） */
  background-position: 0% 100%;
}