Overflow hidden makes div block move

[Waterish (Alex Blake)]

Hi everyone! I’m working on a project where I want one word in a sentence to have an on-hover highlight effect (a bit like this https://www.youtube.com/watch?v=AfNHebaZQr4). I have the first two words in the sentence inside a div block, then the final word and its highlight inside another.

For this hover effect to work, the div containing the underline must be set to overflow: hidden. However, doing that moves the other div down a few pixels, meaning the words in the sentence are no longer horizontally in line with each other.

I’ve created a read-only project to show you what I mean: https://preview.webflow.com/preview/text-underline-231fad?utm_medium=preview_link&utm_source=designer&utm_content=text-underline-231fad&preview=32c01da45b3294414645ca136405aeba

I’ve also noticed there is a one-pixel line where the highlight is showing before you mouse over the text. I’m not sure why this is, as the animation should have it moved to -100% of its starting position and therefore hidden

I’m quite new to Webflow so if there’s an easier way to achieve the effect I want without this problem, I would love to hear it

[cyberdave (Dave S.)]

Hi @Waterish, thanks for your post and welcome to the community

I made a quick video on how to get the text to align and how to remove the 1px left edge:

I hope this helps

[Waterish (Alex Blake)]

Hi @cyberdave, thanks so much for taking the time to make that quick video. It solved the problem perfectly!