You can still do this with css:

a.external {
background:url("miniature-picture.gif") no-repeat etc etc
}

It's by far the easiest solution. Next comes JavaSript or a plugin.

Good luck

From wiki css:

a.external {
background: url(external.png) center right no-repeat;
padding-right: 13px;
}

Afwas, great... it works (using the class="external" thing) which I now would have to add to every new external link...

Do you see any possibility - as described above - to add such an icon after every target="_blank" link? I ask only to ensure, that your above css-solution is not only the easiest way, but without a huge efford, the only one...

Btw, do you know a way, adding with css not only an icon (or text?) but that in addition this icon (or text) has another link than the stuff before? (When this would be possible I would use this only once on my blog... but for now I don´t know how)...

Thanks again...
Daniel

Later css (IE7, FF, Safari) has some new selectors. This works for a link that starts with 'www':

a[href ^="www."] {
// css
}

and it would work because basically every link that starts with www is an external link.
You might refine this if you can find a site that explains these selectors better than I can.

Any other solution I can think of involves JS. That would be a good idea for you if you also want your old links affected. You'll have to find somebody else to make this happen to you. :)

Good luck

Stop the press.

I found this;

a[target="_blank"] {
// css
}

and this works also on your old links.

Hehe, after your first answer concerning this solution I´ve asked google and came up wth a couple of pages hinting in the same direction... and by the moment I wanted to try exactly this out, you posted it here - what confirmes my guess - and it works great (in FF). IE6 simply ignores it and the links are displayed as before... IE7 I can´t try rightnow but I will... Nevertheless, this is now not the only thing, only FF shows correctly and IE displays only a standard solution without "extras"... (IE6 sucks!)

It only looks a little bit weird (in FF) when using such a code:

<a href="http://www.blogfever.de/ref=7" target="_blank"><img src="http://www.chaoszone.de/blog/media/blogs/webnews/blogfever.png" alt="" title="" width="189" height="50" border="0" align="right" /></a><img src="http://www.chaoszone.de/blog/hacks/images/spacer.gif" width="10" height="50" align="right" /><a href="http://www.blogfever.de/ref=7" target="_blank">Blogfever</a> erfreut sich unter Blog...

Because with this, the icon is in front of and behind the first text link... and not with the right sided image...

But nevertheless... I think this is [u]the[/u] solution, I now only have to experiment a little bit with the dedicated css... perhaps I don´t use an icon but another font colour or something else instead... I have to try what looks best...

But... so far... THANK YOU VERY MUCH (AGAIN)!!!

Sadly I haven´t found so far a solution, extending an existing link or text (in a defined p-line) via css with an icon or text linking to a different URL... any idea with this as well?

Where did you find that code or have you tweaked it in the meantime. On your blog it does exactly what
you want (and I checked IE7 for you also: great).

Well done.

--ƒ

*edit*
You did that yourself, didn't you? It's only in the post "Blogfever aktuell" so
cut it out of there. The rest of the links are perfect.

No I haven´t tweaked it yet... had to go shopping for food ;-) will do it shortly... but thanks for checking via IE7

what I´ve found was e.g. this: http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS

Hmmm, my customization is potentially complete... I now only use an icon for a:hover, I think it´s an interesting effect, because without the mouse over a link, everything is still the same as ever... other link colours I´ve tried (without any icon), but that was not what I´m looking for...

Concerning your above question / comment... (now I understood, what "code" you meant), yes it´s from my own page... and I can and will edit it... when I have decided for myself, what my finaly solution will be with this...

You probably want to limit the use of the tweak:

.bPost p a:hover[ ... ] {

to eliminate problems in the sidebar (the icons before the searchboxes) and the "Jetzt bei BLOGFEVER anmelden!" link.

To eliminate the 'problem' with the Blogfever.de logo you need to style this particular link back to normal. You do so by placing
some code *after* the original a:hover.
I do not know what the scope of the selector is, but this might work:

a:hover[src*="blogfever.png"] {
background: none;
color: red;
}

it will work if the scope ends at </a> and not at the first >. If it doesn't work you can easily add an id or a class; it's only one image.

One last idea: to eliminate the dancing letters, you can make place for the icon even if it's not there:

a[target="_blank"] {
padding-right: 16px;
}

Good luck

Hey thanks for the updates... with the limitation concerning only my postings this is much better...

Thi thing with this one image is not so important, potentially I will remove the link and everything is fine... the link ist still in the rest of the text...

Concerning the dancing letters... your solution is working, but then I can show the icon as well when the mouse is not over the link... the idea was normally not showing the icons... because on the one hand I want to mark external links but on the other hand in some posts this is not very pretty... hmm, but the dancing letters are also not the best result, especially when the link is at the end of a line and breaks and shivers because one second the mouse is over and the next is not anymore over the link... huh... that´s one of the first times that the technical solution is there very fast but I still am not very satisfied with the result... but not with your help - but because it semms, that I mself don´t exactly know, what looks best...

I liked the "icon is always there" solution best, but that's all up to you B)

Good luck

This is good... this is very good... I now use:

.bPost p a[target="_blank"],
.bPost ul a[target="_blank"] { 
	padding-right: 16px; 
	background: url(http://www....icon-external.gif) center right no-repeat; 
}

and all text-links (plus the ones in listings) have the new icon, but not all the links on the sidebar and not the images in the posts with external links etc... that´s goood... that´s really good... I like it this way!

Thanks again, Afwas - task complete! :>>