For this website i marked external links with CSS. In HTML the link looks like this:

<a class="external" href="http://www.solunic.at">www.solunic.at<em> (external link)</em></a>

In my CSS file i put the following code:

/*add a right padding to the link and show the external-link icon there*/
a.external{
    background: url('images/Icon_External_Link_bw.png') no-repeat 100% 0;
    padding: 0 16px 0 0;
}

/* hide the explaining text*/
a.external em{
    position: absolute;
    left: -5000px;
    width: 4000px;
}

If there are no line breaks this technique works in all browsers but if a line-break occurs inside of the anchor text, the background-image is not applied after the anchor text but at the line-break

I added a link to the litmus screenshot with the working FF2 ad the wrong IE7 version.

4 answers

3
points
This was chosen as the best answer

Since you're already using your <em> to indicate the external link, you could put your background image on that. Instead of styling the <em> like you are right now, I'd recommend this:

/*add a right padding to the link and show the external-link icon there*/
a.external{
    padding-right: 20px; /* remember this */
}
a.external em {
    position: relative;
    display: inline-block;
    left: 20px; /* this should be the same as the padding-right above */
    height: 16px;
    width: 16px;
    margin-left: -16px;
    text-decoration: none;
    text-indent: -9999px;
    background: url('images/Icon_External_Link_bw.png') no-repeat 0 0;
}

I did a quick test in Safari 4, Firefox 3, IE6 and IE7, and everything looked peachy. Let me know if there are any issues.

Answered over 7 years ago by Matt Pennig
0
points

New Screenshots

Answered over 7 years ago by Martin Schlagnitweit
-1
points

It seems to work, but in FF up to Version 2 the text in the em-tag is not hidden

Answered over 7 years ago by Martin Schlagnitweit
-1
points

I would ignore Firefox version 1 and 2, the number of people using that is minimal and your problem does not break the rendering of the page.

Answered over 7 years ago by Shaun Robinson