問題
ロールオーバーで下線を伸ばすには？
解決策
疑似要素「before／after」を使用して、「transition-duration」を設定しておき、ロールオーバーでwidthを0から100%に変化させる。
ロールオーバーで下線を伸ばす。
色々なサイトでよく見る、ロールオーバーで下線を伸ばす方法をご紹介します。
DEMOはこちら
HTMLはこちら
<ul class="line_extend">
<li>
<a href="#">メニュー01</a>
</li>
<li>
<a href="#">メニュー02</a>
</li>
<li>
<a href="#">メニュー03</a>
</li>
</ul>CSSはこちら
.line_extend{
letter-spacing: -.4em;
}
.line_extend > li{
display: inline-block;
vertical-align: middle;
letter-spacing: normal;
}
.line_extend > li > a{
display: inline-block;
padding: 10px 15px;
text-decoration: none;
background-color: #fff2ee;
border: 1px solid #ffffff;
position: relative;
}
.line_extend > li > a:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #F15A24;
transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-o-transition-duration:0.3s;
-ms-transition-duration:0.3s;
}
.line_extend > li > a:hover:after{
width: 100%;
}ポイント!
- aタグに「position: relative;」を設定して、疑似要素「after」に「position: absolute;」を設定し、左下に配置します。
- 疑似要素「after」に「transition-duration」を設定した上で、「width: 0;」にしておき、ロールオーバーで100%にすることで、左から右へ伸びる様子を演出することができます。
コメント