文字下划线往两端展开的css效果

这里的效果是利用了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);
}