Looking for advice for navbar animation

[Grant]

I apologize if this is in the wrong area or if I have an issue with the format I’m using as this is my first post.

I’m trying to think of how I should go about playing an a:hover animation with code alone. I’m wanting to have an underline appear below my li like -> https://gyazo.com/ed97864bd52ba8b77403d355c0746d57 but appear from the center and expand outwards like ->https://gyazo.com/c425cbf088384ee1f8ec6e606d94abec except more… smooth.

The only solution I am aware of is creating an animation separate and playing it before setting the underline in the code using some sort of delay but I’m curious if I could do this with css/html/javascript alone. Thanks for your time.

[Ranger SVO]

I’m just curious, is this what you want to do?

http://tobiasahlin.com/blog/css-trick-animating-link-underlines/

[Grant]

Yes exactly! Thank you, I’ll try this in the morning.

[Author]

Posts