Text-Decoration vs. Border-Bottom

The topic of using text-decoration versus border-bottom for hyperlinks recently cross my mind. To be honest, I had never consider the effects and impacts of these two different implementations. However, since playing with these concepts, it has become quite an important usability item to me.

Text-Decoration

The CSS text-decoration property is the default link property and web designers have manipulated it for year. However, one of the drawbacks of this property is that the line intersects descenders of the characters. Example:

The boy jumped off his bicycle.

In some situations, the issue does not have that much negative impact. In other situations, say a vertical list, it can have unwanted effects.

• Thingy One
• Thingy Two
• Thingy Three
• Thingy Four
• Thingy Five

If only you could move the hyperlink underline down, away from the descender. Unfortunately, this just isn’t possible.

Border-Bottom

Border-Bottom is not associated with hyperlinks by default, but does allow for additional control that can improve usability. Example:

The boy jumped off his bicycle.

That’s better. And now we have control over the spacing between the characters and the line. Let’s increase the spacing by 3 pixels.

The boy jumped off his bicycle.

Another point of usability is the color. If we all created websites under the guidance of Jakob Nielsen, all hyperlinks would be a bright blue. While this does promote absolute usability, it does diminish the design a bit. What if we consider just coloring the hyperlink line? Hmmm…

The boy jumped off his bicycle.

This might be more acceptable.

One bit of caution. If you add padding, make sure it doesn’t cross the line-height, into the next line.

The boy jumped off his bicycle. This was exciting to see. He then ran into the store for a slurpy. I believe the flavor was berry, as it colored his face.