テキストの下線を両端に展開するcss効果

4022 ワード

ここでの効果はscale属性を用いて中心点を現在の要素の中心に拡大縮小することで実現される.
html
<ul>
	<li class="active">   li>
	<li>   li>
ul>

css
ul,li{
	list-style:none;
}
li{
	display: inline-block;
	position: relative;
	line-height: 40px;
}
li:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	opacity: 0;
	border-bottom: 5px solid #0b72ff;
	transform: scaleX(0);
	transition: 0.2s ease-in-out;
}
li.active:after, li:hover:after {
	opacity: 1;
	transform: scaleX(1);
}