下線アニメーションとは

リンクにマウスを乗せたときに、下線が左から伸びたり中央から広がったりするアニメーションで表示される演出。

概要

リンクにマウスを乗せたときに、下線がふっと現れるのではなく、左端や中央から伸びるようにアニメーションして表示される演出です。疑似要素 ::after で下線用の細い帯を用意し、transform: scaleX() の値をホバー前後で 0 と 1 に切り替えることで実装します。

別名

表記ゆれ：下線アニメーション、リンクホバー下線、アンダーライン

AI への伝え方

「リンクにホバーしたら下線が左から伸びるようにして」「下線が中央から左右に広がるようにして」のように、伸びる起点を伝えると transform-origin の値が決まります。

似たパーツとの違い

「ホバーエフェクト」はホバー時の見た目の変化全般を指す広い言葉で、下線アニメーションはそのうち下線の動きに絞った具体的な演出のひとつという関係です。

デモ

左から伸びる下線中央から広がる下線

コード

HTML

<div class="underline-demo">
  <a class="underline-demo__link underline-demo__link--left" href="#" onclick="return false;">左から伸びる下線</a>
  <a class="underline-demo__link underline-demo__link--center" href="#" onclick="return false;">中央から広がる下線</a>
</div>

CSS

.underline-demo {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  font-family: sans-serif;
}

.underline-demo__link {
  position: relative;
  display: inline-block;
  width: fit-content;
  color: #333333;
  text-decoration: none;
  font-size: 16px;
}

.underline-demo__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: #0017c1;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.underline-demo__link--left::after {
  transform-origin: left;
}

.underline-demo__link--center::after {
  transform-origin: center;
}

.underline-demo__link:hover::after,
.underline-demo__link:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .underline-demo__link::after {
    transition: none;
  }
}