如何修复响应式Navbar中文字悬停下划线过长问题

移动端展开Navbar时，链接被设置为display: block，这会让链接元素占满父容器的整个宽度。而下划线动画是基于链接元素的宽度设置为100%，所以下划线会拉伸到容器的整个宽度，而非文本本身的长度。桌面端因为链接默认是inline-block，宽度由文本内容决定，所以下划线显示正常。

在移动端的媒体查询中，修改链接的显示方式，让它的宽度由内容决定，同时保持居中对齐：

@media (max-width: 768px) {
  #menu-icon {
    display:block;
  }

  .navbar {
    position:fixed;
    top: 100%;
    left: 0;
    width: 100%;
    padding: .5rem 4%;
    background:rgba(255,255,255, .1);
    border-bottom: 2px solid rgba(255,255,255, .2);
    display: none;
    text-align: center;
  }

  .navbar.active {
    display: block;
  }

  .navbar a {
    display: inline-block;
    margin: 1.5rem 0;
  }
}

• 使用inline-block后，链接元素的宽度会自动适配文本长度，伪元素的width:100%就会匹配文本宽度，下划线动画就能正常显示。
• 若偏好使用width: fit-content，则需要给链接添加margin-left: auto; margin-right: auto;来保持居中，因为fit-content会让元素宽度收缩到内容大小，需手动调整居中样式。

内容的提问来源于stack exchange，提问作者Mj _