１行目の字下げは、text-indentで行えますが、２行目以降を字下げする場合はどうするか？

こんな感じにレイアウトしたい

注意書きなどで文頭に「☆」や「※」などを付けたとき、こうゆうレイアウトがほしくなります。
尚、何も考えずにレイアウトすると、

のようになってしまいます。
「☆」という「注意」を引かせる文字が隠れて見づらいですよね。
２行目以降を字下げして、１行目の「☆」マークを見やすくする、そんなレイアウトの表記方法です。

text-indentとpadding-leftの解法

解決方法を単純に言うと、こんな感じです。

全行１文字字下げした後、１行目だけ「字下げ」をキャンセルする

１行目だけ字下げはなかったことにするので、２行目以降の文頭よりも１文字前に出てくるわけですね。

手順

１）padding-leftで全体を１文字字下げする。

２）１行目だけtext-indentで字下げをキャンセルする

「１行目だけ字下げをキャンセルする」というのが直接できないので、text-indent変えて、１行目だけ書き出し位置をかえてやろうという処置をしてます。
この場合、「☆」から始まる１行目が左に１文字ずれたら綺麗ですよね。
通常、text-indent:1emとすると、文字が右にずれることを利用し、それと逆方向の-1emを指定します。

＜p＞
☆一般のお客様の入場は１２：００からです。会員様は１１：００より入場できます。
＜/p＞

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

padding-leftで全行「字下げ」を実施したのち、text-indentで１行目だけ -1文字 字下げを（文章を左に１文字ずら）してると。
「-1文字字下げ」ですので、１文字前に出てくるわけです（左にずれるわけです）。

ちょっとだけ見栄えよくなりますよね。

参考

参考記事