【CSS】2行目以降を字下げしてインデントを揃える

やりたいこと

※サンプルのテキストです。
　 サンプルのテキストです。
　 サンプルのテキストです。

HTMLで2行目以降を字下げしたい場合がある。例えば上記のように、文書の先頭にアスタリスクマークを入れて注釈文を作る際など。

テキスト内に空白を入れる方法もあるにはあるが改行や行数を考慮すると現実的でないので、CSSでこれを実現したい。

解決法

<p>
  ※サンプルのテキストです。<br>サンプルのテキストです。<br>サンプルのテキストです。
</p>

p {
  padding-left: 1em;
  text-indent: -1em;
}

記号の幅（1em)の分だけ余白を空け、字下げすればOK。

余談

<p>
  サンプルのテキストです。<br>サンプルのテキストです。<br>サンプルのテキストです。
</p>

p {
  position: relative;
  padding-left: 1em;

  &::before {
    position: absolute;
    left: 0;
    content: "※";
  }
}

今回のように文頭に記号を付けるだけの場合、擬似要素でも同じことができる。

が※などは装飾目的の記号ではないので、前者の方法のようにHTMLの文書内に記述した方が良い場合もある。