Underline in menu

Guys, I’m trying to achieve underline effect like this one:

http://maintenanceaccounts.com/sw2/

To do so, I use transparent border and then interaction on hoover which changes border color. But then strange thing happen - my border animates in black colour first, then changes to color which I set by interaction. How to change it and make way I want to?

Link to project:
https://preview.webflow.com/preview/deymos87s-spectacular-project-navbar?preview=72bbdadb1942a1c2b6f08b80595903e1


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Guys, can you help me?

I’m desperated because simple tasks in Webflow are starting to be more complicated than they should be - I have no clue why my transparent border is black, when it should be in turquise color according to my animation:/

You can do this easily by using the hover state of the button and add a bottom shadow but it won’t grow from one side to another. You can make it grow upwards though. Other than that, it would be an interaction on a separate div that sits below the link which can get very messy very fast.

If you are new to webflow, have you watched a lot of tutorial videos already?