Strikethrough on Hover

Looking to achieve an animated strikethrough on hover like the one shown in the pen below.

Any idea on how to achieve this directly in Webflow?


You will need to add a div say 1px high , width auto maybe, nest it within the nav item with position absolute. the nav item needs to be position relative. Then you will create a mouse hover interaction where the div line initial state is 0 width and so on. See how you go! You will need the exit hover interaction too I think

Great idea, I’ll give it a shot, thanks! :grinning:

1 Like

Hi guys, could you potentially help with this strikethrough button? I had try to copy it from the existing one on the template, but once I start playing with it, it reshapes the existing linked elements, so I am stuck here no knowing:

a) how to create a strikethrough button
b) how to adjust the strike size as it runs too long. Having tried to adjust the size of the text box and the container, but no luck. I wonder whether the grid it is placed in is the one to determine the length of the line?

Any guidance would be much appreciated :).


I am also trying to do the same. But I also wanted to create the button but as well as the shortcut of subscript also. All the word processors have the strikethrough feature and shortcut also.
Peoples like shortcuts because it increases their work speed and efficiency. If anyone has the suggestions then tell me. I want to create a strikethrough feature like google docs. You can read and know the way to do a strikethrough in google docs. It will help you to know what I want.