【Cocoon】グローバルナビメニューホバー時に下線を表示

Cocoon Child: スタイルシート（style.css）に追加

【ホバーすると中央から左右に向かってラインを引く】

#navi .navi-in a {
text-decoration: none;
}
#navi .navi-in a::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #333;
transform: scale(0, 1);
transform-origin: center top;
transition: transform .3s;
}
#navi .navi-in a:hover::after {
transform: scale(1, 1);
}

CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld

ホバー時にアンダーラインをアニメーションさせるエフェクトのサンプル集で、Sassのmixinを用いて実装する方法も併せて紹介します。

www.nxworld.net