css鼠标划过文字出现往两边延伸的下划线

HTML：

        <div class="nav">
		<ul>
			<li><a href="#">Gravit Designer</a></li>
			<li><a href="#">Gravit Klex</a></li>
		</ul>

	</div>

CSS：

/*导航*/

	.nav{ height: 100%; display: flex; align-items: center; background-color: #f90}

	.nav ul{ flex: 1; list-style: none; align-items: center; justify-content: center; display: flex; font-size: 16px; height: 100%; color: white; }

	.nav li{ position: relative; display: inline-flex; align-items: center; justify-content: center; height: 100%; }

	.nav li a,.nav li a:visited{  color: white;  font-weight: normal;  margin: 20px 15px;  position: relative;  line-height: 40px;}

	.nav li a::before,.nav li a:visited::before{ content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }

	.nav li a:hover::before,.nav li a:visited:hover::before{ visibility: visible; transform: scaleX(1);}

 效果：