[CSS]「※」を行頭に使った文章で2行目以降を1文字分空ける

「※」を行頭に使った文章って2行以降を1文字あけたくなりますよね。
たまにスペースで1文字分あけてるサイトとか見かけますけど、アレってブラウザの文字サイズの設定や、サイト内の文字サイズ変更とかやっちゃうとずれちゃうんですよね。

結構簡単なCSSでできちゃうんで、ぜひ活用してください。

まずはデモ

例えばhtmlでこう書いた場合

<div id="text">
<p>※自動改行の位置を米印から1文字ずらしたいよね。自動改行の位置を米印から1文字ずらしたいよね。自動改行の位置を米印から1文字ずらしたいよね。</p>
</div>

CSSはこうなります。

div#text p {
 margin-left:1em;
 text-indent:-1em;
}

p全体に左マージンを1文字分取って、text-indentで1文字分、字下げしていあげると、2行目以降を1文字分あけることができます。

以上！