Remove Underline from Link

This page explains and demonstrates how to remove the underline from the links on a website.

To remove the underline from a hyperlink, you need to use the CSS text-decoration property. Specifically, you need to use: text-decoration: none;. This tells the browser not to decorate the text (i.e. not to display an underline).

Here's an Example:

Using Classes

Most of the time you will want to place the styes into a class. This way you don't need to add the above code to every hyperlink that you need to remove the underline from. CSS classes are a normal part (and good practice) of website design.

Here's an example of using a class to remove the underline from all hyperlinks within the element that the class is applied to.

Adding an Underline

There may be some cases where you need to add an underline to a link instead of removing it. For example, you might be working with links that have had their underline removed by a global style sheet, but your page/pages require the links to be underlined.

To add an underline to a link (or any other text for that matter), you simply change the none to underline, like this: text-decoration: underline;.

Here's an example of "overriding" a non-underlined hyperlink with an underline. In this case, all hyperlinks within the <div> element have had their underline removed, however, the second hyperlink overrides the rule and adds an underline back in.

Hover Effects

You can use CSS to achieve a "hover over" effect, where the styles change whenever the user hovers over an element. You can also change the styles when someone clicks on the element and even when an element has focus.

Check out CSS Hover for these and other effects.

Usability of Removing Underlines

This technique is often used for menu items and header and footer links. However, the technique should be used cautiously so as not to confuse the user.

Before you remove underlines from all links, ask yourself the question; Now that I've removed the underline from this link, is it possible that users might not even realize that this is a hyperlink?.

While some items might not pose any issue (for example menu items — due to their placement), links within the body text might — especially if their color blends in with the normal body text. If you're going to remove the underline from links in the body text, it's best to make sure that those links use a color that contrasts with the normal body text. That way the links will stand out as such.

Usability of Adding Underlines

A similar usability issue applies if you ever consider adding an underline to normal text (i.e. non-hyperlink text). Web users are used to hyperlinks being underlined, so whenever they see underlined text, they assume it's a link and often try to click on it.