Animated Underlines on Hover in Webflow

🖐 Check out my Webflow templates: robn.link/temp...
🤙 Try out Webflow using my affiliate link: webflow.grsm.i...
This will give me a small commission, which will help me lots. Thank you so much :)
This video will show you how you can create the simple underline hover interaction that's very common on various websites. Have fun :)
🖐 Portfolio: shapedbyrobin.com
🖐 Twitter: / shapedbyrobin
🖐 Instagram: / shapedbyrobin
🖐 Webflow: webflow.com/ro...
🖐 Dribbble: dribbble.com/r...

[@DjSoulsaver]

Short and to the point, love it.

[@FriarHavs]

It would be great if theres a tutorial for having reusable animations depending on how long or short the text is.

[@wybeprod7632]

So smart, straight to the point video and super cool animation, thanks a lot man!

[@jgproductdesign]

Thanks! 🙏

[@momosch7656]

Love it

[@shapedbyrobin]

Thanks 🤙

[@Am_ro12]

Hi - I am unable to make the link block inline. It's greyed out in Webflow. Is this a bug or have I done something wrong. So far, I just made the div and added a link to it. Then, I cannot make the div block inine.

[@panchodharami8594]

Hey for some reason i followed this tutorial and it isnt working, the animation seems to work on preview in the edit toolbar, but on preview for whole page nothing shows up :(

[@KD-ro4iy]

This is happening to me did you fix it?

[@marcjohnson1810]

Unfortunately doesn't work at all for me at all. Maybe they've changed something in the animation

[@allenkuntelebi]

🔥🔥🔥

[@shapedbyrobin]

🙏🙏

[@almaestrada5552]

So the animation does work, but the line apeares when the page loads. Do you know how to fix it?

[@lizvernon]

This is a great tutorial! Just what I was looking for. Is there a way to add a Current state, if I use these links in a nav menu?

[@justinl8836]

WHY SO FAST???????????????

[@jasmineg6608]

There's a tiny dot that remains when you hover out. Anyone have a solution to have the line fully disappear?

[@David_Linde]

Just set the link hover-out animation to 105% and you should be good to go

[@FriarHavs]

This works great but yuou have to manually duplicate this class for every link because the links have different character sizes and the underline here has fixed width

[@korbinianstechl7918]

hmm maybe what if you you put the underline width to 100% ?

[@FriarHavs]

@@korbinianstechl7918 I will try. Thank you