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

2013/5/11 2013/8/19 css

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

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

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

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

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

</div>

CSSはこうなります。

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

div#text p {

margin-left:1em;

text-indent:-1em;

}

ほら簡単。