Alternative Style Links

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

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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.

altstylelinks.png

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