📝
【CSS】文章の2行目以降を字下げする小技
まずは完成形
どういう時に使うか？
リストや疑似要素など、1文字目に記号がくるとき、
2行目以降は記号分の一文字を空けた方がきれいですよね。
しかし何も設定しないと、インデントされません。
【簡単】たった2行で実装できる
使うのは、text-indentとpadding-leftのふたつ。
text-indent: -1em;
padding-left: 1em;
これで文字の先頭がきれいに揃ってくれます。
解説
ひとつずつ分解していきます。
text-indentは、先頭の文字を字下げするプロパティです。
ここが超ポイントですが、マイナスを指定すると、一文字目が左にずれてインデントされます。
なので、text-indent: -1em;で一文字分左に寄せることができます。
このままでは、1文字目の開始位置が左に寄っている状態なので、padding-leftで全体の位置を元に戻して完成です。
文字では分かりづらいかもなので、コードをいじって挙動を確認してみてください😌
さいごに
「整列」はデザインの基本です！
場合にもよりますが、文字の先頭は揃ってないとやっぱり不細工なので、整えましょう。
Twitterでは随時、質問受け付けております！
分からないことなどあればDMください♪
参考
Discussion