Make underline shoot under link on hover

Question

I am looking for a way to make an underline shoot across underneath a link when hovered and go away again when the mouse in not hovering. I'm not sure if I'm doing a good job explaining, so please tell me if you don't understand. I'm pretty sure that this cannot be done with an actual underline, maybe with an <hr> tag? Any help is appreciated!

http://www.net-kit.com/10-ways-to-animate-your-links/ – Robert Harvey Apr 22 '13 at 21:11 — Robert Harvey, Apr 22 '13 at 21:11

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

a {
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid blue;    
    margin-right: 39px; 
    width: 0px;
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
}

a:hover {
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
    border-bottom: 1px solid blue;
    width: 30px;
    margin-right: 9px;
}

Taken from here: Underline css3 transition

edited May 23 '17 at 12:04

Community

1
1

answered Apr 22 '13 at 21:12

Ian

50,146
13
101
111

Thanks Ian! I guess I should of thought about using borders... Thanks for all your help! – 812402 Apr 22 '13 at 21:15

score 0 · Answer 2 · answered Apr 22 '13 at 21:44

0

This is very simple CSS:

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

But this is just for a hover effect, if you want a transition, then the above answer should work.

answered Apr 22 '13 at 21:44

JesseG17

664
1
5
17

Make underline shoot under link on hover

2 Answers2