【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);
}

 

タイトルとURLをコピーしました