Subscribe
Tutorial search

How to remove link underlines - CSS tutorial

Removing link underlines in CSS is very easy but should be used with care
Category: CSS tutorials - Difficulty:




I don’t know with you but I personally don’t like using the button with the underlined capital letter U or using the short key control “ctrl+u”. As much as I can avoid it, I don’t use it. In case, you have the same concern, good news is, you can actually remove that line under a URL. So, if you want to get rid of the underline, here’s what you code:

a {
text-decoration:none;
}

This syntax can be applied to the four pseudo-class like this:

a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: purple;
text-decoration:none;
}

a:active {
background-color: yellow;
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}

However, I will have to remind you to be careful when removing the underline from a hyperlink. You have to know that without the underline, the hyperlink could be come undistinguishable from normal text. Because of this, visitors may not notice that it is a hyperlink and the hyperlink would have very little chance of being visited.