Replacing the usual text decoration on your Multiply themes

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......