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);}
效果: