【css】文章中に改行がある時に、行頭を揃える小ワザ

2016年8月17日

コーディング作業で、※（注意書き）や ・（リスト） から始まる文章を流し込んだ時に2行目以降の行頭も揃えたい！ということがよくあるかと思いますが、
そんな時にcssで簡単に調整できる小ワザをご紹介したいと思います。
以下がソースコードとなります。

【html】

【css】

このように、cssで対象の要素に対して、padding-left:1em; で左に余白を作り、text-indent:-1em; で1文字分マイナスしてあげることで、文頭が揃うようになります。
※-1emは適宜変更してください。
そして、疑似クラス:beforeを使い、文章の前にcontentプロパティで“※”を入れてあげればOKです！

“※”マークとテキストの間隔を調整したい時には、cssで下記のようにしてあげると自由に変更できます。

こちらも余白の値は都度変更すればよいので、コピペで使えて簡単ですね！