リンクテキストにアクセント（画像）をつける

▼EntryMore▼

さてさて、ここでもまたIEがめんどいことになります。
CSSを学べば学ぶほど、IEが嫌いになっていきますw
IEがないか、もっと利口だったらここまで苦労しないのに…という場面は何度も(⊃д⊂)
さて、愚痴はここまでにしてw

いつものようにサンプルです。（いつもサンプルが素っ気なくてゴメンナサイ）
http://www.green.dti.ne.jp/edo/web-test/test9/

さてさて、まずはFirefoxなどの”モダンブラウザ”と呼ばれているブラウザでの動作からいってみましょー。
（IEのせいで未だにこれを仕事で使った事はありませんがw）

#container p a:after{

  content: url("arrow.gif");

}

ポイントは「:after」です。
これも:hoverなどと同じ疑似クラスです。
これの意味は、指定した要素の”後に”、指定したCSSを適用します。
contentは普段あまり見慣れないプロパティですが、簡単に言うと、
そこで指定したものをその要素の”後に”表示します。

つまり、ここで言えば指定した画像を表示することになります。
また、文字の表示も可能です。
その場合は「content: "あいう";」などのように使います。
この場合は指定した要素の最後に「あいう」という文字を表示します。
それ以外は普段作っているCSSと同じものが適用できます。
colorやbackgroundなどの見慣れたものです。
もちろん、指定するのも普段と同じようにできます。
「p.hoge:after」とすれば、クラスにhogeを指定した場合に
その要素の後に指定した内容が表示されます。

なので、リンクごとに後ろに配置した画像を変える、なんてことも出来ます。
また、複数の疑似クラスを適用することもできます。

#container p a:hover:after{

  content: url("arrow_o.gif");

}

こうすることで、マウスオーバーしたときに後ろについている画像も入れ替えられます。
これが使えるととても便利なんですけどねぇ…。
ほら、リンク全部に「■」をつけてたり、なんかしら追加したいときあるじゃないですか。
これを、CSSがすべて自動でやってくれるので、HTML書くときはリンクの文字を書くだけでいいのです。
もし、「■」を「□」に変更するときも、CSSの1カ所を変更するだけで簡単に変えられるし。
もぅもぅ、IEが大嫌いです；；

さてさて。だからといってIEをガン無視するわけにはいかないのでw
（なんていってもシェアNo.1ですから…）
代用を考えないといけません。
それが、これです。

* html #container p a{

  background: url("arrow.gif") right center no-repeat;

  padding-right: 22px;

}

簡単に説明すると、リンクの右側に余白を余分にくっつけて、
そこに背景画像として表示したい画像を表示させる、と。
まぁそんだけですw

これにさらに

* html #container p a:hover{

  background: url("arrow_o.gif") right center no-repeat;

  padding-right: 22px;

}

と、:hoverをつけると、最初に書いた物と同じような動作になります。
ただ、:afterと違い、余白のためリンクの下線は引かれません。
どうしても画像までラインを引きたい場合は

* html #container p a{

  border-bottom: solid 1px #0000ff;

  background: url("arrow.gif") right center no-repeat;

  text-decoration: none;

  padding-right: 22px;

}

とかして、リンクの下線を非表示にし、
border-bottomを指定してやることで代用は可能です。
（ただ若干下線が文字から離れますが）

さて、今回もIEだけに適用させるためにハックを使ってます。
（使うな、とかいってるのに使いまくりですね；）
まぁ、IEが:afterに対応するまではpadding-rightで乗り切るのもありかもw

ここではスターハックを使用しています。
ちなみにスター7・ハックとはまた違いますw
ただ、これもバグ技なので使わないにこした事はありません(;´д｀)