How to clean messy underlines in linked text

The problem

Underlined text is universally accepted as “this is a link.” But most browsers’ fat underlines clog descenders, or parts of letterforms that drop below the baseline.

Solutions

There are four ways to solve this problem. The first is to simply remove the border and use color, font, weight or another text property to make links stand out from non-clickable text. The second way moves the border away from the descenders. The other two involve making the underline blend into the background. Conventionally, that’s impossible. There is no separate “underline” property to change. But using <span>, I found a way to do it.

Examples

jolly doggy jumping jogging pique gadget (default)

jolly doggy jumping jogging pique gadget (blank technique)

jolly doggy jumping jogging pique gadget (border technique)

jolly doggy jumping jogging pique gadget (span technique)

jolly doggy jumping jogging pique gadget (image technique)

How they work

Blank technique

This is the simplest, and most common, technique I’ve seen used to address this problem. Set the link’s text-decoration to “none” in CSS.
Normal link No text-decoration

Border technique

First, set the link’s text-decoration to “none” in CSS. This will remove its underline effect.
Normal link No text-decoration

Second, use CSS’s border-bottom property to create a line under the link.
Normal link Underline steps away.

One advantage here is that you can control the bottom border’s color via CSS.
The whole rainbow to choose from

And there’s also border-top: Underlines become overlines

Image technique

First, set the link’s text-decoration to “none” in CSS. This will remove its underline effect.

Second, create a thin image to rest underneath the text. The example here takes advantage of extra pixels to add a slight drop shadow under the link—and a thicker effect when the mouse cursor hovers over the link.
The underline is subtle enough not to effect descenders like the dangly bits in “dangly.”

Span technique

First, make the link color similar to the background. For example:

This is normal link color. This is faded link color.

Second, wrap the contents of the <a> element in a span, like this: <a href=”#”><span>clickable text</span></a>

Finally, set the span color to the normal link color.
jolly doggy jumping jogging pique gadget

Looking closely at the result, we see:

Wrap-up

These techniques focus on details that, ironically, you don’t want people to consciously notice. Better link underlines make text more legible. It’s not something people should notice—they’re supposed to be reading the text.