css - I have a link icon next to each link. How do I exclude the link icon from images? -
i've got following in .css file creating little image next each link on site:
div.post .text a[href^="http:"] { background: url(../../pics/remote.gif) right top no-repeat; padding-right: 10px; white-space: nowrap; }
how modify snippet (or add new) exclude link icon next images links themselves?
if set background color , have negative right margin on image, image cover external link image.
example:
a[href^="http:"] { background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat; padding-right: 14px; white-space: nowrap; } a[href^="http:"] img { margin-right: -14px; border: medium none; background-color: red; }
<a href="http://www.google.ca">google</a> <br/> <a href="http://www.google.ca"> <img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/commons-logo.svg/50px-commons-logo.svg.png" /> </a>
edit: if you've got patterned background isn't going great images have transparency. also, href^=
selector won't work on ie7 knew already
Comments
Post a Comment