Dotted Link Rollovers

In this CSS tip we teach you how to change the link hover underline from solid to a dotted underline using CSS. We will be referring to code that will be placed within an "external" stylesheet. If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?"

The (pseudo-class) a:hover controls the rollover characteristics of your links. Compare the differences of the code below:

Standard hover link underline:

a:hover {
color: #990000;
text-decoration: underline
}

Dotted hover link underline:

a:hover {
color: #990000;
text-decoration: none;
background-color: transparent;
border-color: #333333;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-style: dotted;
}

In the second code example, we stated the text-decoration property as "none" which is the link underline in the standard code example. Instead we stated we wanted to use a dotted border-style for the bottom border.

Read each line individually. You will find that one of the benefits of using CSS is that it is easy to read and determine what each line means. We even stated what color we wanted the dotted border (different than the text color) and 1px wide which is not possible with the standard method.

If you would like to use the dotted hover link underline technique, simply copy and paste it into your external style sheet. If your stylesheet already contains the a:hover pseudo-class, be sure to remember to remove it.