問題 × 解決策

ロールオーバーで下線を伸ばす方法

問題

ロールオーバーで下線を伸ばすには?

解決策

疑似要素「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%にすることで、左から右へ伸びる様子を演出することができます。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

3 × two =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧