Анимация linkBorderHover не работает с элементами :: after / :: before?

Question

Я попытался создать анимацию для ссылки при наведении курсора, используя элементы ::after, ::before и элемент ::after, которые просто исчезли, и все. Я не понимаю, в чем проблема?

Вот JSFiddle с моим кодом.

Answer 1

Вам нужно изменить это

a::after,
a::before {
  content: '';
  position: absolute;
  bottom: 0px;
  right: 0;
  left: auto;
  height: 5px;
  overflow: hidden;
  width: 100%;
}

a:hover::after {
  animation: linkBorderHover 8s forwards ease-in-out;
}

@keyframes linkBorderHover {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}