CSS workaround for external link with small icon

update 28 feb. 2007
Tested in IE7. The * html hack for IE is replaced by a general conditional comment, for IE7 is reacting as IE6.

The Problem

Normally IE doesn't show link icons as background images, if the link is broken in 2 lines.

HTML:

<a class="extern" href="http://www.worldoutside.com/">come to universe</a>

CSS:

.extern {
    background: url(images/iconout.gif) no-repeat 100% 50%;
    padding: 0 13px 0 0;
    }

Lorem ipsum dolor sit amet, consectetur adipisicing this is a normal internal link elit, sed do eiusmod tempor incididunt ut labore et this is an external link dolore magna aliqua. Ut enim ad minim this is a good long external link veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla this is again an external link pariatur. Excepteur sint occaecat cupidatat non this is certainly a very long external link but that can happen sometimes isn't proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[ for instance the Wikipedia is showing this fenomenon: screenshot ]

But now!

Attention: this is IE-proof, but a terrible trick; not beautiful and far away from semantics! - But: once the css is done, it's very easy to apply in the text writing.

[ click external link and come back to see the visited effect ]

IMG:
The images used here are 13x10px; 3px left side is instead of margin.
Enlarged normal state icon (fuchsia is transparent in reality)
HTML:

<a href="http://www.worldoutside.com/">come to <u>universe</u></a>

The is the hook for the img. While it is set only on the last word of the link, nothing can break.

CSS:

a {
    background: inherit; /* FF correction for double underline (sometimes) */
    }
a u {
    background: url(images/iconout.gif) no-repeat 100% 50%;
    padding: 0 13px 0 0;    /* width of the img */
    display: inline-block;    /* IE correction to show the icon */
    cursor: pointer;    /* IE correction to show hand instead of arrow */
    vertical-align: bottom;    /* Opera correction to get the last word vertical aligned */
    }
a:visited u {
    background-image: url(images/iconout-visited.gif);
    }
a:hover u {
    background-image: url(images/iconout-hover.gif);
    text-decoration: none; /* avoiding the "u" working for the last word! :-) */
    }

HEAD:

<!--[if lte IE 7]>
<style type="text/css">
    a u { /* antidote for IE: contra Opera correction */
        vertical-align: inherit;
        margin-top: -1px;
        }
</style>
<![endif]-->

Remarks:

Only tested in IE6, IE7, FF2 and Opera9 under WinXP.
Of course the same can be achieved with a instead of , but I'm a lazy boy.
If desired, in the same way the icon can be positioned before the link instead of afterwards.
This page is a short version of a (yet unfinished) Dutch article.
See Met css een externe link voorzien van een icoontje (2 Jan. 2007).
Impossible to adapt an existing site css wise.
Changing a class ".extern" cannot efford this > dive into html...
Once in the html the 's and 's are pasted around the last words of the links, all kind of changings can be made by css only.
Though I guess it must be possible to make some clever script: which can use an existing link class "external" to glue a and around the last word of a link. Then the rest can be done by css. So maybe it can be made backwards compatible by script...
Then the only difference with pasting a foreground-img with javascript is the possibility to change the background-img by css at hover.

Links:

Article: Fun links in css. Similar IE problem with hand made img underlining. Workaround, mmm yes: ugly with a factor{amount of words} ...
Ingo Chao's article Background images lost on multi line inline links.
Javascript solution, using class name for external link: Arc90 lab's Tools: External Link.

francky,
27 Febr. 2007

Archived from http://home.tiscali.nl/developerscorner/css-discuss/test-link-iconENupdate.htm

CSS workaround for external link with small icon

The Problem

But now!