Animate Text Underline on Hover

Design help Animations & Interactions
1

Hello,

This is a little different from the problems i saw on the forum already.
So here it goes.

I have a text block, splited in two span text.
The first span is underlined, and i would like to underline the rest of the text (the 2nd span text) when on hover.

Just like the headings on this website : https://www.nrj.fr/

Thanks a lot for your help in advance.

1 Like
2

Hi there,

This is a triggered animation that just does an eased bottom-border width of 100% on hover and 30% by default. It does not need multiple spans. You might be able to do this with a css transition, apply that to a unique classname and put that custom css block in your page custom code.

3

Thank you for your quick answer.

I just wrote that :

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
display:block;
content: ‘’;
border-bottom: solid 3px #019fb6;
transform: scaleX(0.3);
transition: transform 250ms ease-in-out;
}
h1:hover:after { transform: scaleX(1); }
h1.fromLeft:after{ transform-origin: 0% 50%; }

It appears to work.
Thanks again _