1. Computing

Discuss in my forum

Change Link Underlines

Dashed Links, Dotted Links, Double Underlined Links

By

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; }

View

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.

View

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; }

View

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; }

View

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; }

View

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; }

View

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; }

View

Have Fun with Your Links

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

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. Beginning CSS
  6. Change Link Underlines - Dashed Links, Dotted Links, Double Underlined Links

©2014 About.com. All rights reserved.