文章にインデントを入れるCSS

リストなどで1文字目に記号がある時に簡単に2行目を揃えたいなとずっと思っていたので調べてみることにしました。
結論としては2行で実装できます。
使うプロパティはtext-indentとpadding-leftのふたつです。
text-indentプロパティとは、先頭の文字を字下げするプロパティです。値は数字+単位、または% （パーセント）で指定します。padding-leftは説明しないです。

以下CSSです。

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

コードの解説です。
text-indentに 負の値(今回は-1em) を指定することで1文字目が左側にずれてインデントされます。
このままだと先頭1文字だけ左にずれているので、padding-leftで全体の位置に戻して完成です。

昔にエンジニアの人がこれをしようとしてくしゃくしゃのコード書いていたのをずっと覚えていて調べてみましたが2行でできるのは便利ですね。この場面に遭遇したらこれ使おうと思います。