How To Remove the Underlines From Links

Steps to removing underline from text links and issues to be aware of

By default, text content that is linked in HTML using the <a> or "anchor" element is styled with an underline. Oftentimes, web designers choose to remove this default styling by removing the underline.

Many designers do not care for the look of underlined text, especially in dense blocks of content with lots of links. All of those underlined words can really break the reading flow of a document. Many have argued that those underlines actually make words harder to distinguish and read quickly because of the way that underlining changes the natural letterforms.

There are legitimate benefits to retaining these underlines on text links, however. For example, when you do browse through large blocks of text, underlined links coupled with proper color contrast make it easy for readers to immediately scan a page and see where the links are. If you look at the web design articles here on About.com, as well as other articles through the site, you will see this styling of underlined links in place.

If you do decide to remove links from text (a simple process which we will cover shortly), be sure to find ways to style that text to still differentiate what is a link from what is plain text. This is most often done with that aforementioned color contrast, but color alone can pose problem for visitors with visual impairments like color blindness.  Depending on their particular form of color blindness, contrast may be totally lost on them, preventing them from seeing the difference between linked and non-linked text.

This is why underlined text is still considered the best way to show links.

So how do you turn off an underline if you still want to do so? Since this is a visual characteristic we are concerned with, we will turn to the part of our website that handles all things visual - CSS.

Use Cascading Style Sheets to Turn Off the Underlines on Links

In most cases, you are not looking to turn an underline off on just one text link.

Instead, your design style likely requires you to remove underlines from all links.You would do this by adding styles to your external style sheet.

a {
    text-decoration: none;
}

That's it!  That one simple line of CSS would turn off the underline (which actually uses the CSS property for "text-decoration") on all links.

You could also get more specific with this style. For instance, if you only wanted to turn off the underline or the links inside of the "nav" element, you could write:

nav a {
    text-decoration: none;
}

Now, text links on the page would get the default underline, but those in the nav would have it removed.

One thing many web designers choose to do is to turn the link back "on" when someone hovers over the text. This would be done using the :hover CSS pseudo-class, like this:

a {
    text-decoration: none;
}
a:hover {
    text-decoration:underline;
}

Using Inline CSS

As an alternative to making changes to an external stylesheet, you could also add the styles directly to the element itself in HTML, like this:

<a href="" style="text-decoration:none;">this link has no underline</a>

The problem with this method is that it places style information inside your HTML structure, which is not a best practice.

Style (CSS) and structure (HTML) should be kept separate. 

If you wanted all of a site's text links to have the underline removed, adding this style information to each link on an individual basis would mean a fair amount of extra markup being added to your site's code. This page bloat can slow down a site's load time and make overall page management much more challenging. For these reasons, it is preferable to always turn to an external style sheet for all page styling needs.

In Closing

As easy as it is to remove the underline from a web page's text links, you should also be mindful of the consequences of doing so. While it may indeed clean up the look of a page, it may do so at the expense of overall usability. Take this into account the next time you consider changing a page's "text-decoration" properties.

Original article by Jennifer Krynin. Edited on 9/19/16 by Jeremy Girard