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;
}

Вот изображение заголовка

Я знаю, что общей проблемой при этом является не установка границы нижней границы до наведения, но я уже сделал это и установил ее на прозрачный.Цвет меняется при наведении, но граница не отображается.Есть идеи?Спасибо!

Answer 1

Только что понял это.Я звонил overflow: hidden на мой класс .main-nav, и это скрывало мой край-основание.