Custom underlines
Idea from A List Apart.
First, open your graphics editor, make a custom line, I recommend you to not use one bigger than 3px in height. I've made a few for you to use, you can find them at the end of the tutorial, you can always replace the colors, of course.
link example, another example, here we go, again, and finally, the last one.
Well, that's nice, but what's the code?
a {
text-decoration: none;
background: url(underline.gif) repeat-x left bottom;
padding-bottom: 2px;
}
Set your underline as background, make it repeat horizontally only (repeat-x) and set its position to left horizontally and bottom vertically. This is nice, but how do I do animated rollovers? It's simple, make an animated underline, and put it as background using this code:
a:hover {
text-decoration: none;
background: url(underline_over.gif) repeat-x left bottom;
}
Same as previously, make it repeat horizontally only, etc.
Underlines set (906 bytes, 239 hits)
Sponsors
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)