Unable to get the transition on hover - html

Question

I am creating a navbar and when I want to add hover effect over links its not working, I want to add transform property to the after element of links but its not working.
#navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.link-list {
display: flex;
gap: 2rem;
}
.menu-link {
color: var(--white);
text-decoration: none;
position: relative;
}
.menu-link::after { /*this is for the bottom border line which is 25% in length*/
background: var(--white);
content: "";
width: 50%;
height: 2px;
position: absolute;
left: 25%;
bottom: -4px;
transform: scaleX(0); /*i am adding transform 0 */
transform-origin: center;
transition: transform 500ms ease;
}
.menu-link:hover .menu-link::after{ /* unable to get this effect on hover */
transform: scaleX(1);
}
Link lists
<section class="link-list">
About
Careers
Events
Products
Explore
</section>

Answer 1

The meaning of scale is size * argument.
scaleX(0) will *0 so your element will disappear.
scaleX(1) will *1 so your element won't change.
Use the number bigger than 1 or smaller than 1 to do it.
#navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.link-list {
display: flex;
gap: 2rem;
}
.menu-link {
color: var(--white);
text-decoration: none;
position: relative;
}
.menu-link::after { /*this is for the bottom border line which is 25% in length*/
background: var(--white);
content: "";
width: 50%;
height: 2px;
position: absolute;
left: 25%;
bottom: -4px;
transform: scaleX(0); /*i am adding transform 0 */
transform-origin: center;
transition: transform 500ms ease;
}
.menu-link:hover .menu-link::after{ /* unable to get this effect on hover */
transform: scaleX(1);
}
"<section class="link-list">
<a href="#" class="menu-link">About</a
><a href="#" class="menu-link">Careers</a
><a href="#" class="menu-link">Events</a
><a href="#" class="menu-link">Products</a
>Explore
</section>"