CSS で underline に animation をつける

問題

CSS で underline に animation をつけたい。

解決策

::after / :hover / display / transition / width を組み合わせることで実現できる。

例

結果は https://jsfiddle.net/666xcjhj/ .

<a href="http://bouzuya.net">bouzuya.net</a>

a { text-decoration: none; } /* reset default css */

a {
  display: inline-block;
}

a::after {
  content: "";
  display: block;
  width: 0;
  transition: width 0.3s;
  border-bottom: 1px solid #f00;
}

a:hover::after {
  width: 100%;
}

解説

• ::after を underline として利用する。
• transition と width により :hover で underline を animation させている。
• display: inline-block; と display: block; は underline の幅をあわせるためにある。
• content: ""; は ::after を表示するためにある。
• border-bottom: 1px solid #f00; は underline の装飾なので任意。height や background を組み合わせても良い。
• ::after に margin: 0 auto; を指定すると「左→右」から「中央→外」に変更できる。
• line-height によっては ::after が離れてしまうので、position: relative; と position: absolute; などで合わせると良い。

参考

• CSS Sliding Underline | Brad S. Knutson ... その他の動きを集めている。
• CSSでアンダーラインアニメーション - Qiita ... 内容はほとんど同じ。この記事ではよりシンプルにした。