clearFixでお馴染みなCSSの擬似セレクタ::beforeと::afterではcontentプロパティというものが使えるわけですが、
::beforeと::afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。
挿入出来るモノ
大きく分けると３つです。
- テキスト
- プロパティの値
- 画像
content:”テキスト”
半角英数や半角の記号ならそのままでOK。ただしクォーテーションなどのメタ文字は\でエスケープしないと表示されない。
日本語などの2バイト文字も書いたまま表示されるけど、数値文字参照の値で書いた方が無難です。
例：タイトルの前に★マークをつける
h2:before { content:"\002605"; }
/*
HTML:<h2>タイトル</h2>
output: ★タイトル
*/
数値文字参照は16進数で。
例えば★を変換すると★という値になりますが、
これそのままcontent:”★”と入れても★にはなりません。
contentプロパティで利用する場合は、
- ＆を￥に変更する
- #とxを削るか0に変更する
- セミコロンを削除する
と３ステップ踏む必要があります。手作業だと結構面倒かも。
16進の数値文字参照なら上記３ステップ踏めば大抵表示されるので、
✿ こんなお花だとか(\00273f) ♥ ハートマーク(\002665)だとか ☠ドクロ（\002620)みたいな特殊シンボルも表示できたりします。
16進数値文字参照 変換スクリプト
テキストエリアに文字入れてボタン押すとcontentプロパティに最適化されたコードに変換されます。
セレクトメニューから選んだ記号は変換後の値がテキストエリアに表示されます。
content:attr(属性名)
attr(属性名)とすると擬似要素を設定している要素の属性値を表示できます。
印刷用CSSでリンク先URLや画像のタイトルを表示する…なんてのはよくある手法だと思います
a:after { content: " ("attr(href)") "; }
/*
HTML: <a href="http://example.com/">Link Title</a>
output: Link Title (http://example.com/)
*/
img:before { content: " ["attr(title)")]"; }
/*
HTML:<img src="hoge.png" title="画像タイトル" />
output: 【image】 [画像タイトル]
*/
ブログではinsやdelタグで日時を表示するっていうのもよく見ますね。
ins[datetime]:after {
content: " ( "attr(datetime)") ";
}
/*
HTML:<ins datetime="2010-03-23T08:49:26+00:00">○○について追記しました</ins>
output: ○○について追記しました (2010-03-23T08:49:26+00:00)*/
content:url(画像)
url指定すれば画像も表示されます。
テキストなどの前後にアイコンを表示するのには非常に便利です。
<p class="new">○○を修正しました</p>
p.new:before { content:url("new.png"); }
/* output: テキストの前にNEW!という画像が追加される */
利用にあたっての注意等
上でも書いたけどIE7以下が未対応なのでIEユーザーの方が多いサイトなんかではJavaScriptなどのフォローが必要。（2019年現在は必要ありません）
擬似要素なのでcontentプロパティで指示した内容がソースに記述されるというワケではありません。
ソースに書いてあるテキストしか認識できない媒体に対しては無力に等しいです。
「ソースに記述する程でもないけどあったら便利」ぐらいの内容に利用するのが程よい使い方だと思います。
「[CSS] contentプロパティで挿入できるコンテンツ」への13件のフィードバック