CSSトランジションによるアニメーションナビゲーションリンクの下線

アニメーションリンク下線

ホバーで伸びるアニメーション下線は、デフォルトのtext-decoration: underlineに対する洗練された代替です。width トランジションを持つ疑似要素を使用します。

中央から展開

.nav-link {
  position: relative;
  text-decoration: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease-out, left 0.3s ease-out;
}

.nav-link:hover::after {
  width: 100%;
  left: 0;
}

左からスライド

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease-out;
}

.nav-link:hover::after {
  width: 100%;
}

パフォーマンス向上のためのtransformの使用

GPUアクセラレーションのパフォーマンスのために、widthの代わりにtransform: scaleX()を使用します：

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease-out;
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

このscaleXアプローチは、widthプロパティのアニメーション（レイアウトをトリガーする）を避けるため、より高性能です。疑似要素はフル幅で始まりますがscaleX(0)で視覚的に折りたたまれ、ホバーで展開します。