CSSで2行目以降をインデント(字下げ)する方法

文の最初に米印などの記号を付けて米印などの記号を付けて注釈や注意事項などの文章を作る際、2行目以降の1文字目がその記号と被ってしまい、記号がまったく目立たず普通の文章のようになってしまいます。

記号だけを1文字分左に移動させて、テキストとは違う位置に表示させるCSSについて解説します。

まずはどんな現象なのか、説明だけだと難しいので下の表をご覧ください。

2行目以降を字下げ

「字下げなし」を見ると1つの文章のようになってしまって、記号があってもなくてもいいような見た目になっていますが、「2行目以降の字下げあり」の方は記号が目立ち、注釈として機能しているように見えます。

右側のように1文字分を字下げするには以下のコードで実現できます。
padding-left: 1em;
text-indent: -1em;

まずpadding-left:1em;で文章全体が1文字分、右にズレます。
text-indentは文章の最初の1文字を右に字下げ（インデント）するプロパティなので、それをtext-indent:-1em;このようにマイナスに指定することで左に字下げされ、記号部分の1文字だけが左にズレます。

2文字分2行目以降を字下げ

これを応用して下の表のように、米印に番号付きのものでも対応できます。

2文字分字下げするCSSはこちら。
padding-left: 2em;
text-indent: -2em;

3文字分2行目以降を字下げ

今度は【1】や［1]や（1）など3文字分のスペースを必要とする場合です。

3文字分の字下げCSSはこちらです。
padding-left: 3em;
text-indent: -3em;