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 [sourcecode language='css'] a[rel="external"], a.external { white-space: nowrap; padding-right: 15px; background: url(/images/external.gif) no-repeat 100% 50%; zoom: 1; } [/sourcecode]

The HTML To use the CSS, you would add the rel="external" to your html link like so: [sourcecode language='html'] External link [/sourcecode]

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.