テキストの下線を両端に展開する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);
}