CSSを使用して要素の前や後ろに文字や画像を追加する

要素の前に追加するには「：ｂｅｆｏｒｅ」
要素の後に追加するには「：ａｆｔｅｒ」
の疑似要素を利用する。

• • • • • • • • • • • • • • • • • • • • • -

例えば、webページの文章で「★」を入れたいけれど
リーダーで読ませるとき、邪魔。
てなわけで、どうしたらよい？

contentプロパティを利用する。
文字を追加する場合は""でかこむ
画像をつけたいときはurl（ファイルのパス）で

ソースコード（XHTML）
<h2>見出し</h2>
<p>コメント</p>


CSSソースコード
h2:before {
content:url(XXX.gif);
}
h2:after {
content:"★";
}

これで
「(XXX.gif画像）見出し★」が表示される

• • • • • • • • • • • • • • • • • • • • • -

：before
：after
を利用してボックスの角丸を表示させることもできるらしい
これは、別な機会に。

• • • • • • • • • • • • • • • • • • • • • -

♪注意点♪
ただし、IE７までは、通用しないみたい。
SafariとChromeではcontentの値で引用符の記号を表すopen-quoteとclose-quoteに対応していない。また引用部分（blockquote）のかっこの記号を指定するプロパティにも対応していない。
現状では、表示されなくても支障のないデザインに利用するしか無い・・・みたい。

詳しくは、こちらの本に書いてあるよ
絵つきで、とてもわかりやすいよ

XHTML+CSS 100の疑問に答えます。