CSS 动画下划线

Question

希望在 link 上创建一种效果，即边框底部在悬停时呈现动画效果。在 Whosebug 上找到了一个 jfiddle，但效果与预期略有不同。

动画有效，但不是流畅的动画。此外，底部边框看起来比 link 本身更宽，而不仅仅是文本下划线。

我的代码中是否遗漏了什么？

导航栏链接HTML:

<div class="collapse navbar-collapse" id="main-navbar">
    <ul class="nav navbar-nav navbar-right">
         <li><a href="about.html">ABOUT</a></li>
         <li><a href="work.html">WORK</a></li>
         <li><a href="services.html">SERVICES</a></li>
         <li><a href="contact.php">CONTACT</a></li>
    </ul>
</div>

CSS:

#main-navbar ul li a,
#main-navbar ul li a:visited {
    color: white;
    display: inline-block;
    padding-bottom: 3px;
    margin-right: 10px;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}

#main-navbar ul li a:hover {
    display: inline-block;
    width: 100%;
    border-bottom: #16b2d9 3px solid;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}

Answer 1

试试这个

#main-navbar ul li a,
#main-navbar ul li a:visited {
    color: black;
    display: inline-block;
    padding-bottom: 3px;

    margin-right: 10px;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}

#main-navbar ul li a:hover {
    display: inline-block;
    width: inherit;
    border-bottom: #16b2d9 3px solid;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}

Answer 2

是这样的吗？

#main-navbar ul li a,
#main-navbar ul li a:visited {
  color: white;
  display: inline-block;
  padding-bottom: 3px;
  margin-right: 10px;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  text-decoration: none;
  border-bottom: transparent 1px solid;
  margin-bottom: 1px;
  line-height:10px;
}
#main-navbar ul li a:hover {
  border-bottom: #16b2d9 1px solid;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}


body {
  background: black;  /* for testing purpose */
}

<div class="collapse navbar-collapse" id="main-navbar">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="about.html">ABOUT</a>
    </li>
    <li><a href="work.html">WORK</a>
    </li>
    <li><a href="services.html">SERVICES</a>
    </li>
    <li><a href="http://blog.jasonscott.me.uk">BLOG</a>
    </li>
    <li><a href="contact.php">CONTACT</a>
    </li>
  </ul>
</div>

CSS 动画下划线

CSS Animated Underline

html

css

animation