Webを見ていてリンクをクリックするといきなり立ち上がるAdobe Reader。
「PDFならそう書いとけや！」とほんのり殺意がわく瞬間ですね。
非力なサブマシンならOS毎巻き込んで石地蔵状態になる可能性もあり
なかなかこいつは無視できない事例。

自分が制作する場合にはこういう事はかなり気をつけてますが
昔はそれこそテキストリンクの横にimgタグで
ひとつひとつ画像を貼りつけていたもんです。

しかし、このご時世、もっと簡単な方法ないんかいと世間に問えば
それがあるんですよ奥さんっ！
CSS3なら以下の書き方が可能です。

参考サイト：コリス様

外部リンクでアイコンを変更する場合
a[href^=”http://”]{
background:transparent url(../images/external.png) center right no-repeat;
display:inline-block;
padding-right:15px;
}

判別する箇所のサンプル -mailto
a[href^=”mailto:”]

判別する箇所のサンプル -PDF
a[href$=’.pdf’]

判別する箇所のサンプル -圧縮ファイル
a[href$=’.zip’], a[href$=’.rar’], a[href$=’.gzip’]

判別する箇所のサンプル -画像
a[href$=’.gif’], a[href$=’.jpg’], a[href$=’.jpeg’], a[href$=’.png’]

判別する箇所のサンプル -ドキュメント
a[href$=’.xls’], a[href$=’.csv’], a[href$=’.doc’], a[href$=’.txt’]

もちろんこれはIE6では動作しないので、IE6対応の場合
behaviorを使って以下の記述もプラス。

* html a{
behavior: expression(
this.className += this.getAttribute("href").match(/^http.*/) && (!this.getAttribute("href").match("自サイトドメイン")) ? " external" : "",
this.className += this.getAttribute("href").match(/\.pdf$/) ? " pdf" : "",
this.className += this.getAttribute("href").match(/\.doc$/) ? " doc" : "",
this.className += this.getAttribute("href").match(/\.xls$/) ? " xls" : "",
this.className += this.getAttribute("href").match(/\.zip$/) ? " zip" : "",
this.className += this.getAttribute("href").match(/^mailto.*/) ? " mailto" : "",
this.style.behavior = "none"
);
}

それでも、めんどくせえという人はJQueryを使いましょう。
もちろんJavascriptをオフにされると動作しません。

以下のサイトで紹介されてるやり方が一番簡単です。
Lost Technology様の「リンクしているファイルのアイコンを表示」
http://www.losttechnology.jp/WebDesign/2010/linkicon.html

アイコン画像は・・・・・それぐらい作ろうね、と言いたいけども
ICON WANTEDって便利なサイトもあったり。
http://iconwanted.com/

一度、この設定をしておけば使い回しも利くし
うっかり間違いもなくなるので便利には違いないですね。