Do you underline links (and include a rollover)?
  v5.0 Posted at 26/04/2017 12:14 PM by Tiago Araujo

​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.

Bad Example: The link is hard to recognize

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

Good Example: This link is obvious


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

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address: