CSSのscaleを使って、hoverしたときに線をX（横）方向に伸ばす。位置は絶対位置position: absolute;で指定する。
中心から外に線が伸びる（下部）
See the Pen テキストナビゲーション（中心から外に線が伸びる／下部） by Toru Katsumata (@Toru-Katsumata) on CodePen.
中心から外に線が伸びる（中央）
See the Pen テキストナビゲーション（中心から外に線が伸びる／中央） by Toru Katsumata (@Toru-Katsumata) on CodePen.
左から右に線が伸びる（下部）
See the Pen テキストナビゲーション（左から右に線が伸びる／下部） by Toru Katsumata (@Toru-Katsumata) on CodePen.
左から右に線が伸びる（上部）
See the Pen テキストナビゲーション（左から右に線が伸びる／上部） by Toru Katsumata (@Toru-Katsumata) on CodePen.
左から右に背景が伸びる、左から右に線が伸びて背景になる
CSSを使って、hoverした時に要素の横幅・縦幅・不透明度を変更する。
See the Pen テキストナビゲーション（左から右に背景が伸びる） by Toru Katsumata (@Toru-Katsumata) on CodePen.
See the Pen テキストナビゲーション（左から右に線が伸びて背景になる） by Toru Katsumata (@Toru-Katsumata) on CodePen.
上下に線が伸びて背景になる
CSSのtransformを使い、hoverした時に左右に隠れていた線をX（横）方向に移動させて出現させる。その後、transition-delayを使って背景を遅らせて出現させる。
See the Pen テキストナビゲーション（上下に線が伸びて背景になる） by Toru Katsumata (@Toru-Katsumata) on CodePen.
円が線に変化
CSSのscaleを使い、hoverすると円の形になっていた線をX（横）方向に伸ばす。位置は絶対配置position: absolute;で指定する。
See the Pen テキストナビゲーション（円が線に変化） by Toru Katsumata (@Toru-Katsumata) on CodePen.
テキストが入れ替わる
CSSを使い、絶対配置で中央寄せにした上下のテキストの下部分をoverflow: hidden;で隠す。hoverをしたらtransformを使ってY方向にテキストを移動させて出現させる。
See the Pen テキストナビゲーション（テキストが入れ替わる） by Toru Katsumata (@Toru-Katsumata) on CodePen.
線が伸びて枠線になる
CSSで<li>と<span>の疑似要素（beforeとafter）に縦横幅を0にした線を設定する。
hoverすると疑似要素の横幅・縦幅が100%に伸びて線が表示される。線が伸びるタイミングはtransition-delayで少しずつ遅らせる。
パターン1
See the Pen テキストナビゲーション（線が伸びて枠線になる） by Toru Katsumata (@Toru-Katsumata) on CodePen.
パターン2
See the Pen テキストナビゲーション（左右から線が伸びて枠線になる） by Toru Katsumata (@Toru-Katsumata) on CodePen.
