Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles & Tutorials for Work at Home Entrepreneurs
Webmasters and Small Business Owners
Get More >

Newest Articles 
Web Design
Graphic Design
Color Theory
Make More Money
Business Ethics
Glossary of Terms
Business Resources


Link to Us!

Email this article  :  Printer friendly page

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.

Copyright © 1994-2006 by, a division of, CSS HTML Web Site Templates with Exernal CSS and Removable Graphics. If you found our articles helpful, subscribe to our newsletter and get articles like this delivered to your inbox - FREE.

Newest Articles in
Using Multiple External Style Sheets
Resizing Form Input Boxes, Buttons, and Text with CSS
Novel Paragraph Spacing with CSS
Is Your Site Ready for the Holidays? Part 3
Is Your Site Ready for the Holidays? Part 2


Page copy protected against web site content infringement by Copyscape
All articles are originally authored by Reprints in whole or in part are not permitted. See Copyright Notice

Copyright © 1994-2006, a division of, Web Site Templates with External CSS
The Internet's #1 Choice for HTML CSS Web Templates via a Membership. Designed using External CSS and Removable, Swap-Out Graphics.
Basic Web Templates | Website Templates | HTML CSS Templates | Web Design Templates | Web Site Templates