I am using ::after and :hover to make a bottom border animation, so that when I hover over it, it produces this bottomline. I also have a transition of 0.5s so that it creates an animation. However the animation starts from the center, whilst I want it to start from the left.
How do I fix this?
.nav-links ul li a::after {
content: "";
width: 0%;
background: white;
height: 2px;
margin: auto;
display: block;
}
.nav-links ul li a:hover::after {
width: 100%;
}