How i can make link hover underline with transition ?

Question

a:hover { text-decoration: underline; transition: all 1s; } this isn't working

Answer 1

I made an example using pseudo classes just for you, at start i thought about simmilar way to do it like you.
https://code.sololearn.com/WPtgpV7zQ4pC/?ref=app

Answer 2

For an anchor, I often use border-bottom as an alternative to underlining the text itself. It allows extra padding and can even add some JS to make it fade in from right-left and vice versa.

a { border-bottom: 1px solid transparent; transition: 1s;}

a:hover { border-bottom: 1px solid #fff; transition: 1s; }