How to make this hover effect with CSS only ๐
First, you need an SVG with such a curved line.
You can create one in any vector editor.
So here is an example of HTML you can have.
You can create one in any vector editor.
So here is an example of HTML you can have.
Next, the CSS part
1. The SVG should be positioned absolutely, below the link
2. The path should have `stroke-dasharray` and `stroke-dashoffeset` properties.
3. Apart from that it should have transition settings so that the animation would be smooth
1. The SVG should be positioned absolutely, below the link
2. The path should have `stroke-dasharray` and `stroke-dashoffeset` properties.
3. Apart from that it should have transition settings so that the animation would be smooth
Finally, on link hover you should change dashoffset.
The trick is manipulating dashoffset and dasharray properties.
With big dasharray you create a long "gap" in the SVG line. With offset you move the gap away.
The trick is manipulating dashoffset and dasharray properties.
With big dasharray you create a long "gap" in the SVG line. With offset you move the gap away.
However, depending on the path length, you should have different dasharray/offset values. And it's not convenient.
There is a nice trick for making it easy: css-tricks.com/a-trick-that-mโฆ
But in my case for some reason, I had a couple of px shown before animation, not sure why ๐ค
There is a nice trick for making it easy: css-tricks.com/a-trick-that-mโฆ
But in my case for some reason, I had a couple of px shown before animation, not sure why ๐ค
โข โข โข
Missing some Tweet in this thread? You can try to
force a refresh
ใ
