本文内の外部リンクに対して、それを示すアイコンを表示する方法として、Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイトに、a要素に「.external」といった class を付け、

  • アイコン画像を a要素の背景として右端にひとつ表示する方法
  • :after擬似要素と contentプロパティを使ってアイコン画像を追加する方法

と、2種類の方法が載っています。

ただし、Win IE と Mac IE はいずれのバージョンも :after擬似要素と contentプロパティをサポートしていないため、背景関連プロパティを利用して実現したほうがよいだろう。

このように書かれているのですが、IE ではリンクテキストが折り返している場合、リンクテキストが含まれる行の右端に表示されてしまい、返ってみにくい状態となってしまいます。

また、いちいち外部リンクの a要素に対して class 指定するのも面倒ですし、漏れがあるかもしれません。

外部リンクに対してアイコンを表示する の続きを読む »