[CSS]リンクの情報を補う、「content」プロパティのスタイリング集

「content」プロパティを使用して、リンクの情報を補うツールチップやポップアウトを実装するチュートリアルを紹介します。

デモのキャプチャ

CSS Content
デモページ

「content」プロパティの対応ブラウザは合わせて使用する疑似要素の「:after/:before」にも対応したFirefox3.x, Safari3.x, Chrome3.x, Opera10+, IE8+となります。

訪問済みのリンクに印をつける

訪問済みのリンクにチェックマークをつけます。

デモのキャプチャ

CSS

チェックマークの「\2713」は好みのマークに変更してください。

HTML

リンクにテキスト情報を付加する

title属性内のテキストをリンクに付加します。

デモのキャプチャ

CSS

HTML

CSS3ツールチップ

title属性内のテキストを表示するCSS3を併用したツールチップです。

デモのキャプチャ

CSS

HTML

ブラウザの機能としてtitle属性内のテキストをツールチップとして表示することに注意してください。

横にスライドするポップアウト

マウスホバーで、メールアドレスが横にポップアウトします。

デモのキャプチャ

CSS

HTML

印刷時にリンクを表示

印刷時にhref内のデータを表示します。

CSS

sponsors

top of page

©2024 coliss