CSS スタイルシート雑技 No. 4
before、after はかなり便利
飾り文字を入れたいけれど、装飾で文書の意味を阻害するのは…という方には、要素の前後に付く before after 疑似要素を使うと良いかもしれません。
解説
ブラウザごとの実装にばらつきはあるものの、指定した要素の前、もしくは後に表示される before after を使うと、ちょっとした装飾を施す事が出来ます。
<style type="text/css">
h1:before{
content: '*****';
}
h1:after{
content: '*****';
}
</style>
<h1>見出し</h1>
content 内での改行は「 \A 」になります。（ Mozilla 系のブラウザでは、 \A だけでなく、同時に white-space: pre; を指定する必要があります。）
content には文字(string)だけでなく、画像やサウンドファイル、また、要素で指定されるアトリビュート ── 例えば、 <img src="url" alt="代替えテキスト" > として、alt部分を指定する ── などが可能となります。
<style type="text/css">
img:after{
content: '(' attr(alt) ')';
}
</style>
<img src="url" alt="代替えテキスト" >
ただし、 content で指定出来るものはブラウザごとの実装にばらつきがあるため、注意が必要です。