Alternative Style Links

Avatar of Volkan Görgülü
Volkan Görgülü on (Updated on )

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $200 of free credit.

You may know the classic link style very well. Blue with an 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 at 0 and y at 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