Perfect underlines

Details matter: clearing descenders with CSS to get perfect link underlines.

Posted on

This post on Medium/About Medium has the perfect description of the perfect link underline:

The perfect underline should be visible, but unobstrusive—allowing people to realize what’s clickable, but without drawing too much attention to itself. It should be positioned at just the right distance from the text, sitting comfortably behind it for when descenders want to occupy the same space

They threw away a great solution there toward the end of the article though1, which is too bad because it really looks nice. The idea was to use a combination of background images, gradients, and text-shadows to create the underline and knock out space around the descenders. To be fair, I don’t think this is an original idea.

I was reading a some post over on Typekit when I noticed their underlines. When I looked closely I realized the descenders had been cleared and they looked fan-freakin-tastick! I busted open dev tools and, sure as shit, there was the background image, gradient, and text-shadow approach in use. I immediately decided I would snatch it up and claim it as my own.

Here is the basic application of this approach:

a {
  text-decoration: none;
  color: #e0470d;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,transparent),color-stop(50%,#ddd));
  background-image: -webkit-linear-gradient(top,transparent 50%,#ddd 50%);
  background-image: linear-gradient(to bottom,transparent 50%,#ddd 50%);
  background-repeat: repeat-x;
  -webkit-background-size: 2px 2px;
  background-size: 2px 2px;
  background-position: 0 90%;
  text-shadow: 1px 0 white,2px 0 white,-1px 0 white,-2px 0 white;

a:visited {
  color: #983009;

a:focus, a:hover {
  color: black
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(50%,transparent),color-stop(50%,#aaa));
  background-image: -webkit-linear-gradient(top,transparent 50%,#aaa 50%);
  background-image: linear-gradient(to bottom,transparent 50%,#aaa 50%);



And that’s it: beautiful underlines that look amazing.

  1. On grounds that using a bunch of text shadow would not be performant. Some commenters pointed out that only a few would shadows would be needed which would probably negate any performance concerns (if there were actually any founded concers to begin with at all). [return]