注意書きなどで使うぶら下がりインデント、CSSでの実装方法まとめ

たとえば

など、テキストをそのまま流し込んで実装すると（例えデザインの通りだとしても!）、チェックバック時に「頭揃えて」と修正指示をされ『やっぱりか…』となりがちな、ぶら下がりインデント。
2行目以降の頭揃えの実装方法ですが、複数あるので（ケースバイケースでもあるんですが）メモとしてまとめます。

case01: padding-leftとtext-indentを使う

一番オーソドックスなやり方。文頭の文字数が確定しているなら使える。FONT環境によってはズレが発生してしまうことも（例えばMacのヒラギノでは「※」の文字がなぜか一回り小さい）

<p class="caution01">※ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

p.caution01 { 
  padding-left:1em; /* ケースによって調整する */
  text-indent:-1em; /* ケースによって調整する */
}

Demo

case02: 上記の改良型。文頭の文字をinline-blockで幅指定。

こちらも文頭の文字数が確定している場合に。文頭のインデントさせたい文字をspanで囲み、CSSでspanをdisplay:inline-block;した上で幅を設定する。

<p class="caution02"><span>※</span>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

p.caution02 { 
  padding-left:1.25em; /* ケースによって調整する */
  text-indent:-1.25em; /* ケースによって調整する */
}
p.caution02 span {
  display: inline-block;
  width: 1.25rem; /* ケースによって調整する */
  text-indent: 0;
}

Demo

case03: 子要素とpositionを使う（左寄せ編）

こちらは子要素を使って文頭の文字の表示を指定するので、「※」や「注：」など使用する文字が確定しているケースでおすすめ（あるいはケースごとにCSSの記述を書く）。HTMLもスッキリ。

注意点：text-align:center;の場合、文頭の文字が左端に飛んでってしまう。

<p class="caution03">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

p.caution03 { 
  position:relative;
  padding-left:1.25em; /* ケースによって調整する */
}
p.caution03:before{
  position:absolute;
  content:"※"; /* 文頭に表示したい文字を""内に記述する */
  left:0;
  top:0;
}

Demo

追記210528: contentに日本語（全角文字?）を指定すると文字化けすることがある

まだ自分では遭遇していない事象ですが、対処方法をまとめたブログ記事がありましたのでご参照ください。

beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法

CSSの擬似セレクタ :before と :after において、content プロパティに日本語を設定すると、表示時に文字化けが起こってしまう場合があります。大半のブラウザでは文字化けが起こらないのですが、マルチブラウザをサポートしなくてはいけないような場合に備え、予防線を張っておく必要があります。 文字化けする要因 CSSを外部ファイル定義している場合に起こるCSSファイルの

case04: 子要素とpositionを使う（中央寄せ編）

前述case03の注意点「text-align:center;の場合、文頭の文字が左端に飛んでってしまう」へ対応したバージョン。
今度は逆にtext-leftにしたときに頭が揃わなくなるし、複数行のときも揃い方がイマイチなので、文字数が少なくてtext-align:center;限定のぶら下がりインデント実装用です（だいぶニッチなケースですね）。
簡単に言うと、p要素に指定していたposition:relative;と子要素の指定を、内側に追加したspanタグに移行させています。

<p class="caution04"><span>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></p>

p.caution04 { 
  line-height: 1rem; /* ケースによって調整する */
  text-align: center;
}
p.caution04 span { 
  position:relative;
  padding-left:1rem; /* ケースによって調整する */
}
p.caution04 span:before{
  position:absolute;
  content:"※"; /* 文頭に表示したい文字を""内に記述する */
  left:0;
  top:0;
}

Demo

case05: display:table;を使う

文頭の文字数が増えても対応可なのでケースごとにCSSの記述を増やさなくて済む。HTMLがちょっと煩雑になるのが気にならなければ。

注意点：text-align:center;の場合、文頭の文字が左端に飛んでってしまう。

<p class="caution05"><span class="icon">※</span><span class="text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></p>

p.caution05 { 
  display: table;
}
p.caution05 span.icon {
  display: table-cell;
  padding-right: 0.3em; /* ケースによって調整する */
  white-space: nowrap;
}
p.caution05 span.text {
  display: table-cell;
  width: 100%;
}

Demo

case06: 子要素とFlexboxを使う（左寄せ編）

IEで崩れそうで敬遠していましたが、いよいよFlexboxです。子要素で文頭の文字を指定するので、「※」など使用する文字が決まっているときに。
こちらもcontentで全角文字を使う想定なので、case03の追記をご参照ください。

<p class="caution06"><span>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></p>

p.caution06 { 
  display: flex;
}
p.caution06:before {
  content:"※"; /* 文頭に表示したい文字を""内に記述する */
  left:0;
  top:0;
  margin-right: 5px; /* ケースによって調整する */
}

Demo

case07: 子要素とFlexboxを使う（中央寄せ編）

justify-content: center;を指定します。

<p class="caution07"><span>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></p>

p.caution07 { 
  display: flex;
  justify-content: center;
  text-align: center;
}
p.caution07:before {
  content:"※"; /* 文頭に表示したい文字を""内に記述する */
  left:0;
  top:0;
  margin-right: 5px; /* ケースによって調整する */
}

Demo

おまけ

レスポンシブ時のtext-align指定の切り替え

上記「case07: 子要素とFlexboxを使う（中央寄せ編）」を流用して、ブラウザ幅767px以下ではtext-align: left;で768px以上ではtext-align: center;に指定してみた（ここではBootstrapのclass指定text-left text-md-centerを使用しています）
※ブラウザ幅を伸び縮みさせてみてください。

<p class="caution0 text-left text-md-center"><span>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></p>

Demo