ホーム > CSS > 外部リンクにだけ「別ウィンドウで開く」よ、というアイコンを自動的に表示するCSS

外部リンクにだけ「別ウィンドウで開く」よ、というアイコンを自動的に表示するCSS

2010 年 5 月 11 日 コメントをどうぞ コメント

外部リンクにだけ「別ウィンドウで開く」よ、というアイコン 外部リンクを自動的に表示するCSSをやってみる。

a[href^="http"],
a[href^="https"]{background:url(/images/arrow04.gif) no-repeat right center;padding-right:15px;}
a[href^="http://www.route58.org"],
a[href^="http://route58.org"]{padding:inherit;background:transparent;}
* html a.external{ /* IE-expression (attr-selector) */
background:url(/images/arrow04.gif) no-repeat right center;padding-right:15px;}

サンプル http://route58.org
サンプル http://miyoya.com

CSSで背景として出すのではなく、イメージ画像として出す場合のCSSは以下。
素敵なアイコンと以下のCSSソースはCool Web Window さんから頂きました!ありがとうございます!

a[href^="http"]:after,
a[href^="https"]:after {content:url(/images/arrow04.gif);}
a[href^="http://www.route58.org"]:after,
a[href^="http://route58.org"]:after {content:"";}

いろいろなカラーやタイプのアイコンとソースの詳細はCool Web Windowさんのページから。
http://www.coolwebwindow.com/w……000157.php

カテゴリー: CSS タグ: ,
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
  1. コメントはまだありません。
  1. トラックバックはまだありません。
:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

明日世界の終わりが来ても~ ♪

Positions by Seo-Watcher