How to remove underline from a link and add underline on hover? (images attached)

Question

I want underline to be removed from a link. Also I want underline to appear when I hover it with my mouse pointer. How can this be done? Pls help.

No hover:

When I hover the Login link:

Solution 1

You need to turn off the CSS property text-decoration for the link and then use the :hover dynamic pseudo class to add the text-decoration back when hovering.

a {
    text-decoration:none;
}

a:hover {
   text-decoration:underline;
}

Demo

Also, you might also need to style the :visited:hover pseudo class so that the underline appears on links a user has already visited. link order in css is a good answer because the order of the CSS rules matters.

Solution 2

Assuming your login link has the id login...

#login {
   text-decoration: none;
}

#login:hover {
   text-decoration: underline;
}