Hover Line Animation for Body of Text

Design help Animations & Interactions
1

Hello,

On my current site, I have an animation where a line goes across the word being hovered on. This works well for links, but I also want to replicate the same effect for body of text. For example, on the home page, if I go over ‘Carnegie Mellon University,’ I would like to have the same effect. However, because of how I implemented it for the links, it doesn’t seem possible to do it here. Any ideas on how I can do this?

Also, on this person’s site, I noticed that if one of their links is already underlined and then they click on another one, it will animate that link’s line going away and then the new link’s line coming out at the same time. Currently, on my site, it just completely clears the current link’s underline when clicking on the same one. Is there any way to be able to have the same transition on Webflow?

Thank you so much!

Here is my site Read-Only: https://preview.webflow.com/preview/rchen?utm_medium=preview_link&utm_source=designer&utm_content=rchen&preview=6f8060d978754ba878c55931b3607976&workflow=preview

2

Hi @rckychen as there is many ways hot to achieve this effect with just CSS or JS I will suggest to use your favourite browser and look for text underline animation. Out there is many other great articles/videos about this topic. Here is just a few.