CSS - 边界底部的过渡不起作用

Question

当光标悬停在链接上时，我想在标题导航上有一个边框底部过渡。当我第一次实现它时，它正在工作，但是在添加了更多代码之后，我无法使其工作。

我的CSS看起来像这样：

a:link,
a:visited {
  color: #1c2234;
  text-decoration: none;
  padding-bottom: 20px;
  border-bottom: 3px solid transparent;
  -webkit-transition: border-bottom 0.2s, color 0.2s;
  transition: border-bottom 0.2s, color 0.2s;
}

a:hover,
a:active {
  color: #555;
  border-bottom: 3px solid #1c2234;
}

Here's a picture of the header

我知道这个问题的一个常见问题是在悬停之前没有设置border-bottom，但我已经这样做并将其设置为透明。悬停时颜色会发生变化，但边框不会显示。有任何想法吗？谢谢！

Answer 1

刚想出来了。我在.main-nav类上调用overflow: hidden，这隐藏了我的边框底部。