【マウスオーバーイベント】CSS＋JSで作るアンダーライン→消えて復活する

言葉だと全く伝わらないと思うが、要するにこういうことがしたい。

「初期バー、マウスオンでアンダーライン伸ばし、マウスを離したら消えて初期のバーに戻る」

とりあえず結論から

See the Pen XBVLbY by HiroyasuMurayama (@h-murayama-the-reactor) on CodePen.

参考サイト
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 | NxWorld
のは色んなアンダーラインがあるが、初期に少しバーがあり、消えた後にまた復活させるとなるとおそらくleave時のイベントが必須。
つまりJSなしでは実現不可と思われる。

今回は下記のように分解してクラスを作った。
・初期化用のクラス
・初期状態を定義するstartクラス
・オンマウス時のクラス
・マウスが離れた時のクラス