マウスホバー時に下線が伸びるリンク

See the Pen Untitled by チータツ ＠ブログについて語る (@cheese_fuji) on CodePen.

CSSの解説

<a href="#">マウスホバーで下線を左から引く</a>

a{
  position: relative;
  text-decoration: none;
}
a:after{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1.5px;
  background-color: #0000ee;
  transition: .3s;
}
a:hover:after {
  width:100%;
}

1. リンク a の下線を text-decoration: none で非表示にしておく
2. 疑似要素 a:after でリンクの真下に青い背景を設置
3. ホバー時に a:hover:after の長さを width: 100% にして、長方形（下線の形）にする

線を引くプロパティ "border" では長さを変更できないため、青い疑似要素を細長く伸ばすことで下線を作っています。

応用CSS

右から左へ伸ばす

先ほどのCSSとは反対方向（左 ← 右）に下線が伸びます。

人間の視線の動きは「左 → 右」なので、違和感を感じる人が多いアニメーションです。使いどころは考えましょう。

See the Pen Untitled by チータツ ＠ブログについて語る (@cheese_fuji) on CodePen.

左→右の時とは違い長さは常に width:100% にしておき、代わりに transform: scale(); で幅を調整。transform-origin で起点を右にしておくのもお忘れなく。

左から右に流れる

カーソルを離した際、下線がそのまま右へ流れるように消えるCSSです。

See the Pen Untitled by チータツ ＠ブログについて語る (@cheese_fuji) on CodePen.

長さは width: 100% にしておき、scale: (0,1); から scale(1,1); にすることでx方向に長さを伸ばしています。

変換時の基点となる "transform-origin" の値（left と right）を入れ替えれば、右→左 に流れるように変更可能です。

おすすめの使い方

• 本文中のリンク
• 重要なリンク
• ヘッダーメニューなど

WordPress向けCSS

このアニメーションは、全てのリンクに適用するようなものではありません。
WordPressの場合は、以下のCSSをスタイルシートに保存しておき、使いたいリンクのある段落 (pタグ) にだけクラスを付与して使うのが便利です。

See the Pen Untitled by チータツ ＠ブログについて語る (@cheese_fuji) on CodePen.

WordPressのCSSの使い方。