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