Posts Tagged ‘multiply text decoration codes’

Replace Text-Decoration In Multiply Links | Text Decoration Tutorial

Just a little CSS tricks for your Multiply site, by replacing the usual underline text decoration of links in your Multiply site.

I used a small animated gif arrow image as my underline text decoration for the links when hovered,. (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 10×5)..

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;