



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

Related Posts by Categories



Hoctro | Jack Book Widget by