Links With Dashed Underlines

Underline styles are not implemented in modern browsers, so the text-underline-style property of CSS will not make links have dashed underlines.

A workaround I had seen on the web was to use the border-bottom property on links, to set a 1 pixel border below the links.


This gives you something like this: Sample Link.

The problem with this is that the underline is very far below the text, which is not where an underline should be. It gets very bad on larger sized text. The dashes are also very big, with a lot of space, which is not attractive. So, I invented a new solution.

I figured that background images would never work, because they would not scale with font sizes. However, with a little CSS, I was able to create a solution that works almost exactly the same as actual underlining with font sizes 10px to 18px, which are the only sizes I ever really link.

It also allows me to swap the underline for a solid underline on hover, which I think created a cool aesthetic effect, that looks like this: Sample Link.

The solution uses two tiny images, which are 3x2 pixels and 50 bytes each. They are listed below, but they are small, so you'll have to squint. Click on the links provided to the right of the images to download them.

[/images/linkunderline.gif]
[/images/linkunderline_hover.gif]

This work is licensed under a Creative Commons Attribution 3.0 United States License.
Please link to this article in your source code comments if you use this content.