Is there a way to animate a line under text when hovering over?
Similar to the elements in this - Carbon Beauty
Right now I just overlay images to move right/left to reveal a line.
I would like to know the same thing. I’m currently trying to use scale transition from 0 to 100% using interactions (I’ve placed line in as svg image), which could possibly work for you? My issue is that my line is dashed, so scaling from 0 to 100% has noticeably squashed dashes but if line is same thickness it probably would work?. Worth playing around with it.
Hey @ParagonTwo, sorry for the late response I just saw this.
I figured if you set a div to the width and height of the line you want, and then add a solid background color to it, it will resemble your line. Add an interaction for it to go from W:1 px to whatever length it’s original state is and you should have your line animation.
Hope this helps!
1 Like
You can’t really get this full CSS effect with Webflow without adding elements along with the text, as you already do. The one of your example relies on pseudo elements such as :before and all the CSS methods you’ll find around do too.
1 Like
I think its possible if you create a div, add the text inside the main div and another div below the text then then make it 0 width, with the main div selected, create interactions for the line div and give it 100% on hover then 0 on hover out.
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.