Create better looking underlined links with CSS3 box-shadow and text-shadow

Unstyled links are by default underlined (with the exception of Opera Mini). Browsers simply use a 1 pixel solid line in the same colour as the text. You can change the appearance of the underline. There is a specification, but not with full browser support and somewhat limited possibilities. For a long time using a border-bottom has been an alternative to replace the regular underline. But the border always appears completely below the text. With CSS3 you now can (ab)use box-shadow to influence the position of the underline. To create a gap between the text and underline you can also add text-shadow.

Below you can see the different solutions with the appropriate CSS.

Using box-shadow has a few disadvantages. It needs to be the same colour as the background, if you don’t want a fat underline. This will not look good on an image background, because you will see a double underline. Also box-shadow is known to have a negative impact on rendering performance. But without a blur radius this seems not to be an issue. At least I didn’t notice any lag using this technique on this web site. And of course, it only works in browsers that support CSS3. You can use Modernizr to detect support for this CSS feature.

Link with standard underline
independent web & usability engineer


a {
  color: #070;
}

Link with text-decoration
independent web & usability engineer


a {
  color: #070;
  text-decoration: underline;
  text-decoration-color: #bdb;
  text-decoration-skip: ink;
}

Link with border-bottom
independent web & usability engineer


a {
  color: #070;
  text-decoration: none;
  border-bottom: 2px solid #bdb;
}

Link with box-shadow
independent web & usability engineer


a {
  color: #070;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 0 #bdb;
}

Link with double box-shadow
independent web & usability engineer


a {
  color: #070;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 #fff, inset 0 -3px 0 0 #bdb;
}

Link with double box-shadow and text-shadow
independent web & usability engineer


a {
  color: #070;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
  box-shadow: inset 0 -1px 0 0 #fff, inset 0 -3px 0 0 #bdb;
}

Back to top