css の h2 の最初

質問

外部スタイルシートを使っているのですが、そこで、h2のことなのですが、見出しの最初をたとえば☆にしたいと思います。
もちろん、htmlのタグに<h2>☆見出し</h2>と書けばいいのですが、できれば、ＣＳＳで☆の部分だけ自動的に入るようにしたいのですが、そのようなことは可能でしょうか？　可能だとすればどうすればいいか、教えてください。

回答No.1

piyoui · ベストアンサー

疑似要素「:before」を使うことで可能です。
以下のように書きます。
h2:before { content: "☆" }

ただし、IEでは最新版でも対応されていません。NN,Opera,firefoxではこれでOKですが、IEを無視してしまうのは難しいと思いますので、私ならこの場合☆を画像化し、以下のように書きます。

h2{
padding-left:画像の幅px;
background: url(xx.gif) no-repeat 0 50%;
}

xx.gifが「☆」の画像のパスです。
この場合、文字情報でなく背景画像の飾りとしての役割になりますが、見た目の問題としてはこれで解決すると思います。

参考URL：

http://www6.plala.or.jp/go_west/nextcss/ref/slctr/ps_elem.htm#ba

お礼

ありがとうございました。
参考ＵＲＬのサイト、すごいですね。ここまでできるとは思っていませんでした。