A method for adding link unerline styles that's better than CSS borders.
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.
1 A
2 {
3 border-bottom: 1px dashed #000000;
4 }
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.
Articles and downloads sponsored by:
Thanks! Amazon commissions help me pay for textbooks.
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]
1 A:link, A:visited {
2 color: #003652;
3 text-decoration: none;
4 background-image: url('/images/linkunderline.gif');
5 background-repeat: repeat-x;
6 background-position: bottom center;
7 }
8 A:active, A:hover {
9 color: #003652;
10 text-decoration: none;
11 background-image: url('/images/linkunderline_hover.gif');
12 background-repeat: repeat-x;
13 background-position: bottom center;
14 }
Articles
Contact
IM
Peet's Malawi Songwe River