今回は、下のようなホバーするとアンダーラインが気持ちよく現れるメニューを作ってみました。
下のメニュの上にカーソルを載せてみてください。
疑似要素、:beforeの初期位置を、liの真ん中、すなわちleft:50%に指定し、hover前の幅を0にしておくことで、transitionにより、真ん中から、にゅっとアンダーラインが出現しているように見えます。
実際のコードは下になります。
transitionは応用しがいがありそうですね。
みなさんもぜひお試し下さい。
CSS
.sample_header li{
display: inline-block;
padding: 15px;
list-style-type: none;
position: relative;
}
.sample_header li:after{
content: "";
position: absolute;
height: 4px;
background-color: #008CBA;
bottom:-2px;
width: 0;
left: 50%;
-webkit-transition: all ease-out 0.2s;
-moz-transition: all ease-out 0.2s;
-ms-transition: all ease-out 0.2s;
-o-transition: all ease-out 0.2s;
transition: all ease-out 0.2s;
}
.sample_header li:hover:after{
left: 0;
width: 100%;
}HTML
<ul class="sample_header"> <li><a href="#">項目1</a></li> <li><a href="#">項目2</a></li> <li><a href="#">項目3</a></li> <li><a href="#">項目4</a></li> </ul>