お知らせ / ブログINFO / BLOG
2019.07.01
【CSS】text-indentで2行目以降を1字下げる
箇条書きや注意書きを表示する際に、最初の一文字を「※」や「・」などの記号やアイコンにする場合ってありますよね。
2行目以降の最初の一文字が、その記号やアイコンの下に回り込まないようにするやり方のご紹介です。
HTML
<p>※text-indentでの2行目以降の字下げ。<br>ここは2行目です。</p>CSS
p {
text-indent:-1em;
padding-left:1em;
}画面表示
※text-indentでの2行目以降の字下げ。
ここは2行目です。
emを指定する事によってpadding-leftで1文字分の余白を左側にあけ、1行目の1文字目をtext-indentをマイナスにする事で左側に1文字分戻してます。
画像などのアイコンを指定する場合は、画像のサイズ分を1emの代わりに指定してあげて下さい。
