Do you underline links (and include a rollover)?

Last updated by Nick Curran [SSW] 5 months ago.See history

This rule has been archived

Always make links perfectly clear.

It's very important that your links stand out from the background as well as the surrounding text. A solid underline and a contrasting color is the usually the best choice, but the exact method is not important as long as the end result stands out. A link should not only be discoverable upon accidental hovering.

Rollovers are important as they offer visual feedback to a user that this link that will take them somewhere. While there is a myriad of ways to do this; you can't go wrong with an underline or border-bottom.

For more information on this, please go to SSW website.

Good Example: Obvious rollover. You can test it by hovering the links on the example above

Example CSS for rollover:

a:hover { 
    color: #cc4141;
    cursor: pointer;

Figure: Example CSS for rollover effect

We open source. Powered by GitHub