先日、CSSでテキストのぶら下げインデントの実現方法を質問されたことがあったので、やり方をここにも書いておいてみます。
文章の冒頭に「※」などを付け、その後に続く文章が改行された際には、字下げを行う、ぶら下げインデント。
Webページ上でもその様な段落表現をすることは多々ありますが、それをCSSで実装するには、下記の様に指定します。
【例：<p>タグに対してぶら下げインデントを指定する場合】
◆HTML ——————————————–
<p>※ぶら下げインデント用ダミーテキスト。ぶら下
げインデント用ダミーテキスト。ぶら下げインデント用ダ
ミーテキスト。ぶら下げインデント用ダミーテキスト。ぶ
ら下げインデント用ダミーテキスト。ぶら下げインデント
用ダミーテキスト。</p>
◆CSS ———————————————
p {
padding-left: 1em;
text-indent: -1em;
}
◆実装デモ ——————————————–
※ぶら下げインデント用ダミーテキスト。ぶら下げインデント用ダミーテキスト。ぶら下げインデント用ダミーテキスト。ぶら下げインデント用ダミーテキスト。ぶら下げインデント用ダミーテキスト。ぶら下げインデント用ダミーテキスト。
—————————————————
段落に対してtext-indentを「-1em」で一文字分左へずらして、padding-leftで位置を通常に戻すために「1em」をつける。（margin-leftでも可）
これだけの簡単な指定で実現できます。
もちろん<p>タグだけでなく、<li>など他のタグでも使用可能です。
注意点はプロポーショナルフォントはブラウザによって「1em」の解釈が違うので、「・」を使った時など綺麗に揃わない場合もあります。
その際はハック等でブラウザ毎にemの値を「1.2em」といったように微妙に調整する必要がでてきます。。。
ご参考までに。。。