この記事は 4 年 9 ヶ月 11 日 前に書かれたものです。最新の情報とは異なる場合がありますのでご注意ください。
本文内の外部リンクに対して、それを示すアイコンを表示する方法として、Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイトに、a要素に「.external」といった class を付け、
- アイコン画像を a要素の背景として右端にひとつ表示する方法
- :after擬似要素と contentプロパティを使ってアイコン画像を追加する方法
と、2種類の方法が載っています。
ただし、Win IE と Mac IE はいずれのバージョンも :after擬似要素と contentプロパティをサポートしていないため、背景関連プロパティを利用して実現したほうがよいだろう。
このように書かれているのですが、IE ではリンクテキストが折り返している場合、リンクテキストが含まれる行の右端に表示されてしまい、返ってみにくい状態となってしまいます。
また、いちいち外部リンクの a要素に対して class 指定するのも面倒ですし、漏れがあるかもしれません。
で、このサイトに採用した方法は、属性セレクタを使ってリンク先を判別し、:after擬似要素と contentプロパティを使ってアイコン画像を追加する方法です。したがって、IE では表示できません。
＃みなさん、poor な IE より、Firefox を使いましょう。
因みに、IE7 では属性セレクタには対応するようになりましたが、相変わらず :after擬似要素あるいは :before擬似要素には未対応です。
具体的には、
div#main a[href^="http:"]:after,
div#main a[href^="https:"]:after {
content: url(css_img/external.gif);
vertical-align: middle;
}
div#main a[href^="<$MTBlogUrl$>"]:after {
content: "";
vertical-align: baseline;
}href属性が”http:”か”https:”で始まる a要素に対して、リンクテキストの後にアイコン画像を追加し、その上で href属性が自サイトの URL である場合は追加したアイコン画像を消します。
なお、div#main を指定してコンテンツ領域のみに限定しています。
参考にしたサイト： CFDN | 外部リンクにアイコンを付ける
Recent Comments