Cocoonホーバー時にアンダーライン

ホバー時にメニューにアンダーラインが出てくるCSS

そしてこちらがホバー時にアンダーラインが出てくるCSSです。

/*ホバー時にメニューにアンダーラインを出す*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 0;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #fcf404;/*線の色*/
transform: scale(0,1);/*ホバー前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

上記CSSで、マウスオーバー時に真ん中からアンダーラインが出てきます。