1. Technology

Change Link Underlines

Dashed Links, Dotted Links, Double Underlined Links


Browsing the Web
Adam Kazmierski/E+/Getty Images

When you create an HTML link, browsers automatically underline it so that your readers can see what text is clickable. But what if you want to make it stand out even more? There are ways to change the underline to dots or dashes or even change the color.

But First, Remove the Underline

The first thing you need to do is remove the underline from your link. This may seem counter-intuitive, but since we're trying to dress up the link, you need to get rid of the existing styles and that means getting rid of the underline. Nearly all the styles I'll show you after this will require that you start with the underline turned off.

To remove the underline, use the CSS property text-decoration:

a { text-decoration: none; }


Change the Underline to Dots or Dashes

Instead of a solid line, you can use dots to underline your links. To do this, set 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; }


And 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. To make a second dotted underline appear when you hover over the link:

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


Have Fun with Your Links

Links are fun on Web pages, and you can have a lot of fun styling them with CSS.

©2014 About.com. All rights reserved.