今回は、下のようなホバーするとアンダーラインが気持ちよく現れるメニューを作ってみました。
下のメニュの上にカーソルを載せてみてください。
疑似要素、: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>