Jan
30
How To: Add an external link image via CSS
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.)
Do you do this differently? Have a better solution? Please feel free share thoughts, feedback and comments.
Related Posts
Subscribe by 
Follow me on 
How To: Add an external link image via CSS…
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…
You could just use a[target="_blank"] in the CSS, without the rel attribute.
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.
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.
this is what i looking for, i think this css will help me in my customization
http://www.voip-services-provider.co.uk
Voice over IP (VoIP) software is used to conduct telephone-like voice conversations across the internet. There are many free VOIP Software available on the webs for download. VOIP Software is popular because VOIP phone service is often cheaper than traditional phone service, and is becoming more popular for both business and personal calls.
VoIP Services
oh thank for the code big help
Designer Handbags
Louis Vuitton replica handbags
Replica Handbags
Replica Rolex
Replica watches
Rolex Replica
Rolex shop
Rolex
Gucci bag
Gucci handbags
Gucci
Louis Vuitton
LV Bags
Replica Watches
Replica Rolex
steel shelving
storage rack
racking
conveyor chain
wow gold
maplestory mesos
tattoo equipment
tattoo machine
Replica Watches
Replica Watches shop
Cartier shop
Omega shop
Patek shop
Longines shop
casio shop
Patek Philippe shop
aion gold
buy aion gold
aion power leveling
wow gold sellers
buy darkfall
buy darkfall gold
darkfall online gold
psu meseta
buy psu meseta
phantasy star universe meseta
Its really cool, I came to know this really worth visiting, just bookmarked your site.
http://gisnap.com/
The place where fun never ends
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
Your web is very useful I liked a lot and I will return to read again.
For my siteadd link add url
This article is very good. Useful to me. I will return to read this article and other article absolute sure. thank you
For my site Linking
I don't get it. Clicking on this image doesn't lead me to Google…