Alternative Style Links

The following post is a guest post, authored by Volkan Görgülü (email link) who has a passion for developing usable and accesible websites and writing well structured CSS and semantic (X)HTML.

You may know the classic link style very well. Blue with underline. There is an alternative way to achieve the same effect, that is a bit nicer.


Here is the code:

a {
  text-decoration: none;
  background: url(link-line.gif) repeat-x 0 100%;
  padding-bottom: 1px;

Giving the background position of x:0 and y:100% places the background image at the bottom of the text and by setting the padding-bottom to 1px, we make the distance between the text and the background image 1px.

Check out the live example, where there is another example extending what can be done by using an image as the underline.

View DemoDownload Files