注釈（※付きの文章）を綺麗に表示するCSSを作ってみた｜2行以上もOK

ブログで結構使うので。 注釈っていうのはコレです。 ※から始まる、文章を補足するための文章ですね。ブロガーならよく使うんじゃないでしょうか？

単純に先頭に※を付けるだけでもいいんですが、それだけだと文章が2行以上になった場合ダサくなります。 気になる人は気になる所なので、CSSで解決しましょう。

サンプル

1文字目を左に1em字下げした後、全体を右に1em移動させています。これで1行目のみ字下げすることが出来ますね。

さらに応用

おまけ程度ですが、こんなことも出来ます。 ※と文章の間に、0.3emの余白を取っています。あと、擬似要素を使って※を自動で付与するようにしてみました。
見かけ上の違いはほとんど無いんですが、こっちのほうが綺麗に並んでいるっぽくないですか？ 以上、注釈を綺麗に表示するCSSでした。