:before :after疑似要素は、IE7以前のものなど古いブラウザでは対応していないといった理由で積極的に使ってこなかったのですが、最近では少しだけ出番が増えてきました。文字の先頭にアイコンを付けたり、記号をつけたりと、なにかと便利なんですよね。
先日のことなのですが、ふと、「先頭に画像を付けて記号やテキストも付けるなんて欲張りも出来るんだろうか」と思ったのです。これまでは、画像なら画像だけ、文字列なら文字列だけ、といった具合に、複数のものを挿入するってことが無かったので…。そこで試してみました。付けられました。ほんのり感動です（笑）
foo というクラスを付けた p で試してみます。
<p class="foo">疑似要素でいろいろ挿入してみるよ！</p>
CSSはcontentプロパティで、挿入したいものを並べて書くだけ。
p.foo::before {
content: url(bar.gif) "こんにちは！";
}
こんな感じになります↓
これを使って遊ぶアイデアは思い浮かぶものの、真面目な使い道となるとあまり思い浮かばなかったりします。アイコンとナンバーを入れたい時や、対話形式でアバターと名前を入れたい時などに使えそうでしょうか。
