Animation linkBorderHover is not working with ::after / ::before elements?

user_9418675 0
Viewed 21

I tried to make animation for link on hover using ::after, ::before elements and ::after element just disappears and that's all. I don't understand where is the problem?

Here is JSFiddle with my code.

css-animations css
1 Answers

You need to change this

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);
  }
}
user_23787830
Related