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; }