CSS

マウスオーバーで左右に伸びるメニュー

'19.12.21

スタイルシートに以下を追加

.parent a {
position:relative;
}
.parent a:before, .parent a:after {
padding:0;
position:absolute;
top:1.4em;//メニューの高さ1.4em以上
content:"";
display:inline-block;
width:0;
height:2px; 
background:#000;
-webkit-transition:0.5s;
transition:0.5s;
}
.parent a:before {
left:50%;
}
.parent a:after {
right:50%;
}
.parent a:hover:before, .parent a:hover:after {
width:50%;
}

 

(View1934)