Replace the usual underline text decoration of links while on hover
I used a small animated gif arrow image as my underline for the links when hover,. (size of image depends on you, just make it sure it is small and will look like a line when on repeat-x)
this is the image i used
(the size is 10x5)..
you can do this on all links on your entire site or just a section of your site links only..this code is for navbar links only
a.topt:hover, a:visited.topt:hover, a:link.topt:hover, a.toptsel:hover, a:visited.toptsel:hover, a:link.toptsel:hover {
text-decoration:none;
padding-bottom: 2px;
background: url(image_url_here) repeat-x bottom ;
}
this code is for entire links..
a:hover, a:visited:hover, a:link:hover {
text-decoration:none;
padding-bottom: 2px;
background: url(image_url_here) repeat-x bottom;
}
just choose a proper selector where you want to apply this..
you can adjust the padding to place it at the top(as overline), bottom(underline) or midlle(like strike-through)..
value of text-decoration must be none..NOTE: if you use the second code.. all links will have that underline image ,. including photos
in album, thumbnails (if sets in thumbnails) and all headshot links.. -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
if you want the usual text decoration, here are some you can use,.
Value's of text decoration
text-decoration: underline;
text-decoration: overline;
text-decoration: linethrough;
text-decoration: blink;
text-decoration: underline overline;
See original article at Multiply Themes, Layouts and Tutorials site
Read More......
