スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSの content プロパティを使って、訪問済みリンクにチェック

Link Visited Check

CSSの content プロパティの使い方がいろいろと紹介されていました。その中で気になったのが、訪問済みのリンクにチェックをつけるというもの。早速、このブログに設定してみました。

設定したのは、サイドの最新記事と人気の記事一覧。そしてフッターのカテゴリ一覧です。訪問済みのものには上図のようにチェックがつきます。こうしておくと、どの記事を見たかが一目瞭然で、さらに人の心理としてすべてチェックしたくなるとかならないとかw

設定方法は、下記のとおり。

a:visited:after {
  content: "\2713";
}

:visitedの擬似要素にさらに:afterの擬似要素を使っています。\2713がチェックマークです。:afterを:beforeにすればリンクテキストの前にチェックがつくようになります。ちなみに、IE6と7では効いていないはず。ぜひ、IE8にアップグレードをw

ちょっとしたアクセントに良さそうですね。

元記事には他にもcontentプロパティの使用例が紹介されていますよ。
CSS Content | CSS-Tricks

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。