# リンク矢印のナッジのCSSアニメーション実装

> 「詳しく見る →」の矢印がホバーで前に動くマイクロインタラクション。1行のtransitionで完結する最小の気配りです。

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

## HTML

```html
<a class="more" href="#">詳しく見る <span class="arrow">→</span></a>
```

## CSS

```css
.more {
  color: #3c5c88;
  font-size: 16px;
  text-decoration: none;
  font-weight: 600;
}

.more .arrow {
  display: inline-block;
  transition: translate 0.2s ease;
}

.more:hover .arrow {
  translate: 5px 0;
}

.more:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
```

## 仕組みの解説

矢印のspanをdisplay: inline-blockにするのが唯一の罠ポイントです（インライン要素はtranslateなどの変形が効きません）。動きはわずか5pxですが、「押すと進む」というリンクの意味を動きで補強できます。ホバー時の下線はtext-underline-offsetで文字から少し離すと上品に見えます。

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

- [transition](https://www.css-dictionary.com/property/transition.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [text-decoration](https://www.css-dictionary.com/property/text-decoration.md)
- [pseudo-hover](https://www.css-dictionary.com/property/pseudo-hover.md)