html - border-bottom 比文本大

Question

我想知道是否有人可以帮助我解决这个问题。我的 border-bottom 看起来比它加下划线的文本长，我只是希望它正好适合正下方，且长度与文本相同。
您可以在图片中看到它的外观: Picture

我尝试了一切我不知道我做错了什么，任何建议都很好!谢谢

这是我的代码:

.navigation {
text-align: center;
margin-top: 0px;
width: 100%;
font-size: 40px;

li.active-link>a{
 text-decoration: none;
 color: $accent-color;

ul {
  margin: 0;
  padding: 0;
}

}

 li {
  position: relative;

  &:hover > a {
    color: #1836a9;
  }

  a:hover {
    color: #1836a9;
    border-bottom: 4px solid #1836a9;
    margin-bottom: -5px;
    display: inline
  }
    }

a {
  display: inline;
}
  }

  .has-dropdown {

&.active {
  > a {
    position: relative;
  }

  > ul {
    display: block;
  }
}

Answer 1

将 a 元素上的 padding 替换为 margin(相同的值，但 margin 而不是 padding)