html - 如何创建从中间到边缘导航栏选定标记的边框？

Question

我想像这样创建一个带边框动画的导航栏 https://youtu.be/AO60KQtb3N8如果我将光标移到链接上，一条条从中间出来。我尝试使用动画，但线条没有从中间出来，而且与文本的大小不一样。

HTML

<nav class="nav" >
    <div class="NavElements" >
        <div><a class="navList" href="">HOME</a></div>
        <div><a class="navList" href="">PRODUCT</a></div>
        <div><a class="navList" href="">CONTACT</a></div>
    </div>
</nav>

CSS

.nav {
     display: flex;
     font-size: 16px;
     font-family: arial;
     height: 50px;
     border: solid 1px black;
}

/*@keyframes slideLine {
     0%   {border-bottom: solid 1px; width: 0%;}
     100% {border-bottom: solid 1px; width: 50%;}
}*/

.NavElements {
     text-align: center;
     margin: 0px 0px 0px 50px;
     display: flex;
     align-items: center;
}

.navList {
     float: left;
     margin: 0px 30px 0px 30px;
}

.navList:hover {
     animation-name: slideLine;
     animation-duration: 0.3s;
     position: relative;
     animation-fill-mode: both;
}

Answer 1

你可以使用 CSS 来完成它

.grahical-underline a {
  position: relative;
  color: #000;
  text-decoration: none;
}

.grahical-underline > a:hover {
  color: #000;
}

.grahical-underline > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  text-align: center;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.grahical-underline > a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

<h1 class="grahical-underline"><a href="#">Nisharg</a></h1>