最近メッセでよくcssについて話したりするんですが(一方的に教えてもらってるだけだけどw)
:beforeと:afterという擬似要素があることをはじめて知りました。
そういえば今使ってるテーマのcssにもそんな記述があったっけ。
ホントにcssは奥が深くてわからないことばっかりです。
:before 擬似要素および :after 擬似要素は，その名のとおり，要素の内容の前(:before 擬似要素)または後(:after 擬似要素)にテキストなどを挿入するための擬似要素である。
なるほどー
なんかこの擬似要素って工夫次第で面白いことができそう…
その1ということでまずは簡単なところから訪問済リンクにちょっと変化をつけてみました。
↑こんな感じで訪問済リンク(visited)に:afterを指定することでチェックマークがつきます。
CSS:
-
a:visited:after {content:“\00A0\221A”;}
通常訪問済リンクって普通のリンク色と変えるのが一般的にわかりやすいとは思うんですがデザインの都合であんまりいろんな色を使いたくなくて今までは区別していなかったんです。
ワタシの場合Tag Cloudを表示してる関係でbody部分全体に適用するとちょっとウザイかなって思ったんでクラスとIDを指定しました。
1番親切なのはやっぱり訪問済リンクの色を変えてこういった小技は補助的に使うべきなんでしょうねぇ…
そうそう!!
この:beforeと:afterの擬似要素はIEではサポートされてません :(
そんなことする前にそのハッキリしないコントラストなんとかしろって言われそうですね… :P
たぶんチェックマークは全ての環境では表示されないっぽいです…
面倒だけどbackgroundで画像を指定するのがいいのかも
う、トラバったら文字化けしちゃいました。すみません。
＞setomitsさん
なんでなんでしょ??
とりあえず直してみました。
これに懲りずに絡めるもんがあったらまたお願いしまーーす:-)