擬似要素はマウスを下線に移動して両側に展開する効果を実現します

詳細
【原理】
擬似要素:beforeおよび:afterを要素の下部中央に配置し、幅を0から100%に設定して目的を達成します.
 
【ケース】
まず、ブロック要素を定義し(行の要素の幅が広くない)、背景色が薄い灰色の長方形にスタイルを変更し、相対的な位置を設定します.

#underline{
    width: 200px;
    height: 50px;
    background: #ddd;
    margin: 20px;
    position: relative;
}

 
2、設定:beforeと:afterの2つの擬似要素を背景色が青(つまり下線の色)に設定し、絶対位置決めで2つの要素をunderlineの下部の中間位置に固定する

#underline:before,
#underline:after{
    content: "";/*         ，      */
    width: 0;
    height: 3px; /*     */
    background: blue; /*     */
    position: absolute;
    top: 100%;
    left: 50%;
    transition: all .8s ; /*css    ，0.8   */
}

 
3、マウス移動効果の設定
 

#underline:hover:before{/*             50%   */
    left:0%;
    width:50%;
}
#underline:hover:after{/*             50%   */
    left: 50%; /*    ，       */
    width: 50%;
}

 
【最適化】
1、目的は達成したが、2つの偽元素を使って、1つは左に50%、1つは右に50%伸ばして、1つだけ100%まで伸ばして目的を達成することができますか?

#underline:after{
    content: "";
    width: 0;
    height: 5px;
    background: blue;
    position: absolute;
    top: 100%;
    left: 50%;
    transition: all .8s;
}
#underline:hover:after{/*   left:50%  0%   ，   0%  100%*/
    left: 0%;
    width: 100%;
}

2、after擬似要素のみを定義し、それを左から50%幅を0にすると同時に左から0%幅を100%に変更することで実現でき、コードを簡素化する目的を達成し、また、beforeが他の操作を容易にすることができる. 
 
【完全コード】
互換性についてはしばらく処理していません
下線展開にマウスを移動

#underline{
width: 200px;
height: 50px;
background: #ddd;
margin: 20px;
position: relative;
}
#underline:after{
content: "";
width: 0;
height: 5px;
background: blue;
position: absolute;
top: 100%;
left: 50%;
transition: all .8s;
}
#underline:hover:after{
left: 0%;
width: 100%;
}
 
 
 
 
.