Jan
30

How To: Add an external link image via CSS

tutorials, web design | | Comments

Pop up links suck. The twitterverse also responded when asked: Should Links Open in a New Window? Twitter Web Designers Voice In. But sometimes you need to use them. Sometimes you are required by your clients to use them. Or sometimes it is best to use them. It would be nice to at least let the person know that clicking on the link will open a new window/tab. Here’s an easy way to add a little image to the external links using CSS.

The CSS

a[rel="external"], a.external {
white-space: nowrap;
padding-right: 15px;
background: url(/images/external.gif) no-repeat 100% 50%;
zoom: 1;
}

The HTML
To use the CSS, you would add the rel="external" to your html link like so:

<a href="http://www.google.com" rel="external" target="_blank">External link</a>

The Result
Here’s what the final result looks like after using the CSS and HTML. (This is an image! Not a real link.)
External Link CSS Example

Do you do this differently? Have a better solution? Please feel free share thoughts, feedback and comments.

Share the Love:
  • Digg
  • del.icio.us
  • Facebook
  • StumbleUpon
  • Design Float
  • Reddit
  • DZone
  • FriendFeed
  • Twitter
  • email
  • Print

Related Posts

  • sint4x
    Wow, you're making it too complicated!

    Easier way is to leave the link how it is (no rel or target attribute if you don't need it) and use:

    a[href^="www.yourdomain.com"]
    {
    /* internal links */
    }

    Enjoy :)

    `SiNT4X
  • Its really cool, I came to know this really worth visiting, just bookmarked your site.

    http://gisnap.com/
    The place where fun never ends
  • Very cool. Is there any way of doing this with out have to add a "rel" tag. Its going to take so long to go through hundreds of posts and add the bit of text.
  • Yes there is. You can replace the CSS code to use a[target="_blank"] as Spinn has pointed out. I avoided that as I don't like using the target a lot. Plus, it also allows me to different images for different external links. Such as PDFs, etc.
  • spinn
    You could just use a[target="_blank"] in the CSS, without the rel attribute.
  • Yes. That is true. The reason why I avoided using the target=_blank, is because I also like to have different CSS images attached to separate types of external links. If I'm linking to PDFs or other such links. Including internal links that I may need to make open in new tabs/windows.

    Good point though. It is very useful if one does not want/need to use different images.

    Thanks.
blog comments powered by Disqus