How to Change Link Underlines on a Webpage

Remove Link Underlines or Create Dashed Dotted, or Double Underlined Links

By default, web browsershave certain CSS styles that they apply to specific HTML elements. If you do not overwrite these defaults with your site's own style sheets, then the defaults will apply. For hyperlinks, the default display style is that any linked text will be blue and underlined.The browser does this so that a site's visitors can easily see what text is linked. Many web designers do not care for these default styles, especially those underlines.

Thankfully, CSS makes it easy to change the look of those underlines or remove them completely.

Removing the Underline on Text Links

Underlined text can be more challenging to read that non-underlined text. Additionally, many designers simply do not care for the look of underlined text links. In these instances, you will likely want to remove these underlines altogether.

To remove the underlines from text links, you will use the CSS property text-decoration. Here is the CSS you would write to do this:

a { text-decoration: none; }

With that one line of CSS, you would remove the underline from all text links. Even though this is a very general style (it uses an element selector), it still has more specificity than the default browsers styles do. Because those default styles are what creates the underlines to begin with, that is what you need to overwrite.

A Caution on Removing Underlines

Visually, the removal of underlines may be exactly what you want to accomplish, but you should be cautious when you do this as well.

Whether you like the look of underlined links or not, you cannot argue that they make it obvious as to which text is linked and which is not. If you take away underlines or change that default blue link color, you should make sure you replace them with styles that still allow linked text to stand out.

This will make for a more intuitive experience for your site's visitors.

Do Not Underline Non-Links

Another caution on links and underlines, do not underline text that is not a link as a way of emphasizing it. People have come to expect underlined text to be a link, so if you underline content in order to add emphasis (instead of making it bold or italicizing it), you send the wrong message and will confuse site users.

Change the Underline to Dots or Dashes

If you want to keep your text link underlines, but change the style of that underline from the default look, which is a "soldi" line, you can do this too. Instead of that solid line, you can use dots to underline your links. To do this, you will still remove the underline, but you will replace it with the border-bottom style property:

a { text-decoration: none; border-bottom:1px dotted; }

Since you've removed the standard underline, the dotted one is the only one that appears.

You can do the same thing to get dashes. Just change the border-bottom style to dashed:

a { text-decoration: none; border-bottom:1px dashed; }

Change the Underline Color

Another way to draw attention to your links is to change the color of the underline. Just make sure the color fits with your color scheme.

a { text-decoration: none; border-bottom:1px solid red; }

Double Underlines

The trick to using double underlines is that you have to change the width of the border. If you create a 1px wide border, you'll end up with a double underline that looks like a single underline.

a { text-decoration: none; border-bottom:3px double; }

You can also use the existing underline to make a double underline with other features, such as one of the lines being dotted:

a { border-bottom:1px double; }

Don't Forget the Link States

You can add the border-bottom style to your links at different states such as :hover, :active, or :visited. This can create a nice "rollover" style experience for visitors when you use that "hover" pseudo class. To make a second dotted underline appear when you hover over the link:

a { text-decoration: none; }
a:hover { border-bottom:1px dotted; }

Original article by Jennifer Krynin. Edited by Jeremy Girard