2行目以降もインデントされるようにリストを作成する

数字や※でのリストを作成するときに、上記のように2行目以降は字下げをしてほしいな〜っていうことありますよね…

疑似要素を使用して作成するのがよくあると思いますが、text-indentを使用する方法がすごく簡単だったのでメモ。

index.html

<ul class="text-wrap">
  <li>1.テキストテキストテキストテキストテキストテキストテキスト</li>
  <li>2.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</li>
</ul>

style.css

.text-wrap {
    width: 300px;
    border: 1px solid;
    padding: 12px;
}

.text-wrap > li {
    text-indent: -1em; /*ここで字下げ。今回は一文字分なので1em*/
    padding-left: 1em; /*text-indentでデザインが崩れるので修正*/
    word-break: break-all; /*枠内にテキストを収める*/
}
.text-wrap > li + li {
    margin-top: 24px;
}

「text-indent」で任意の文字分（余白文）後ろにずらす。
↓
デザインが崩れるので、paddingで調整
という考え方です。