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

カテゴリ:CSS小技 2006年6月30日 20:01

リンクテキストにマウスオーバーで色を変化させたり、というのはよくあると思います。
それではなく、リンクテキストにちょっとした装飾を施しちゃいましょう。
例えば、リンク文字の横に矢印の画像を入れたりとか。n

▼EntryMore▼

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

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

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

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

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

もちろん、指定するのも普段と同じようにできます。
「p.hoge:after」とすれば、クラスにhogeを指定した場合に
その要素の後に指定した内容が表示されます。n

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

こうすることで、マウスオーバーしたときに後ろについている画像も入れ替えられます。
これが使えるととても便利なんですけどねぇ…。n

ほら、リンク全部に「■」をつけてたり、なんかしら追加したいときあるじゃないですか。
これを、CSSがすべて自動でやってくれるので、HTML書くときはリンクの文字を書くだけでいいのです。n

もし、「■」を「□」に変更するときも、CSSの1カ所を変更するだけで簡単に変えられるし。
もぅもぅ、IEが大嫌いです;;n

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

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

これにさらに

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

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

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

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

この記事のカテゴリー一覧を見る⇒CSS小技

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/8

コメント

1 - きっぴ さん

おぉ〜(◎w◎)/★私も、CSSでリンクテキストにアイコンつけますよ〜。とかに設定してメニューによく使いますぅ。n★「:after」なるほどぉ・・・。n使ったこと無かったです。nこ〜んなに丁寧に書いてくださってありがとうございますっ!n面白そうなので、今度使ってみたいです。

2006年7月 5日 19:34

2 - えど さん

きっぴさん、どもです(*'-')いえいえ、分かりやすいように書くことで、自分も復習になるし、なにげに気づくことも多いんですよ!nなにかリクエストとかあったらコメントください(○'ω'○)ノ

2006年7月 5日 20:48

3 - よた さん

はじめまして。nおかげさまでIEで:afterと同じように画像を付ける方法は分かりました。n質問なんですが、:after の content で文字を追加している場合、n同じことをIEで実現するにはどうしたらよいのでしょうか?

2009年1月30日 14:35

4 - えど Author Profile Pageさん

>>3 - よた さんコメントありがとうございます(*'-')質問の件ですが、残念ながらCSSのみでIEに:afterと同じことを実現することはできません。nただ、Javascriptを併用することでIEでも:afterの指定を正常に動作させてくれるものなどもあるので、そういったのを利用してみてはいかがでしょうか?

2009年1月30日 17:18