# ホバーで伸びる下線のCSSアニメーション実装

> テキストリンクにホバーすると、左から右へ滑らかに下線が伸びるアニメーション。ナビゲーションの定番エフェクトです。

- カテゴリ: ホバー
- URL: https://www.css-dictionary.com/animations/text-hover-underline/

## HTML

```html
<nav class="links">
  <a href="#" class="underline-slide">ホバーしてみてください</a>
  <a href="#" class="underline-slide">ナビゲーションリンク</a>
  <a href="#" class="underline-center">中央から広がるタイプ</a>
</nav>
```

## CSS

```css
.links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15px;
}

.links a {
  position: relative;
  width: fit-content;
  color: #8a6d3b;
  text-decoration: none;
  padding-bottom: 2px;
}

.links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #b0413e;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

/* 左から右へ */
.underline-slide::after {
  transform-origin: right; /* 離れるときは右へ消える */
}

.underline-slide:hover::after,
.underline-slide:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left; /* 現れるときは左から */
}

/* 中央から外へ */
.underline-center::after {
  transform-origin: center;
}

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

## 仕組みの解説

下線の実体は ::after で敷いた高さ2pxのバーです。widthをアニメーションさせる方法もありますが、transform: scaleX() はレイアウト再計算が起きないため滑らかです。ホバー時と非ホバー時で transform-origin を left / right に切り替えると「左から現れて右へ抜ける」一方向の動きになり、体験が上質になります。

## 実装のポイント

フォーカス時（:focus-visible）にも同じ動きを付けておくと、キーボード操作でも現在地が分かりやすくなります。

## 使っているプロパティ

- [position](https://www.css-dictionary.com/property/position.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [transition](https://www.css-dictionary.com/property/transition.md)