Daily happenings, XHTML, CSS, MT, WP, Web, a memo, etc…

外部リンクにだけアイコンを表示

サイト内では、内部リンクと外部リンクが混在しているのですが、視覚的に分かりやすく、外部リンクにだけアイコンを表示する方法です。(CSS
流れとしては、全てのリンクにアイコンを表示し、その後で内部リンクのアイコンを消去します。

外部リンクにだけアイコンを表示

CSS

/* 全てのリンクにアイコンを表示 */
a[href^="http:"]:after,
a[href^="https:"]:after {
 content:url(画像のパス);
 margin-left: 5px;
}

/* 内部リンクのアイコンを消去 */
a[href^="http://ドメイン/"]:after {
 content:"";
}