Home/ Questions/Q 40803
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T15:04:51+00:00

I’ve got the following in my .css file creating a little image next to

  • 0

I’ve got the following in my .css file creating a little image next to each link on my site:

div.post .text a[href^='http:'] {     background: url(../../pics/remote.gif) right top no-repeat;     padding-right: 10px;     white-space: nowrap; }

How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. If you set the background color and have a negative right margin on the image, the image will cover the 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 a patterned background this isn’t going to look great for images that have transparency. Also, your href^= selector won’t work on IE7 but you probably knew that already

    • 0