HTMLとCSSでulの行頭文字を「※」にする方法

「注意書き」をリストを使って書きたい。その行頭あるいは段落には（赤い）「※」が付いていて欲しい。

ワープロソフトでは簡単なんだけど、なかなかこれがHTMLでは難しい。CSSと組み合わせて実現する方法を以下にまとめる。

HTML側

<li class="annotation">注意書きの文。</li>

まぁ、クラスを付けておくだけだ。問題はCSS側。

CSS側

li.annotation	{

				font-size: smaller; 

				list-style: none; 

			}

li.annotation:before	{

				content:"※ "; 

				color: red;

				}

li.annotation:first-letter	{margin-left: -1em;}

読める人なら解説は不要かもしれないけど、

1. １つ目は、注意書きなのでフォントサイズをちょい小さくして（発想としては再定義されたsmallタグと同じ）、行頭文字を消す。
2. ２つ目は、１文字目を指定するやつだ。※印の後に半角スペースがあるのは僕のこだわりだ（笑）。だがこれだと、※は「１文字目」であって、段落からはみ出た「行頭文字」にはならない。そこで↓
3. １文字目を1emだけ前にずらした。

以上、誰かの何かの役に立つかもしれないので記録しておく。