【CSS】ナビゲーションにぴったり | ホバーエフェクト 下からほわっと線がでてくる

ナビゲーションに適用するとぴったりな、ホバーエフェクト。
li(a)にカーソルをのせると、下からほわっと線が出てくる。

ポイント
・aに:afterで疑似要素を作成する。*1
・a:afterをopacity:0; とすることで、hover時に線がふわっと出てくる表現が可能となる。（hover時はopacity: 1; とする）
・a:afterの要素を非表示にしておくため、visibility: hidden;とする。（hover時はvisibility: visible;とする）

*1
疑似要素の記述方法はコロン一つ？二つ？

CSS3 では疑似クラスと疑似要素を見分けやすくするために、 ::after の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された :after も使用できます。