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

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

Answer 1

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