br要素を使わずにCSSだけで改行する方法
::befor
や ::after
といった疑似要素の content
に \a
を入れることで改行できる。
コード例
.foo::after { content: '\a'; white-space: pre; }
サンプル
解説
content: '\a' について
\a
というのは改行を表している。
改行(厳密に言うとLF)はUnicodeで U+000A
であり、contentプロパティに渡す文字列内では、エスケープ文字 \
をつけてUnicodeを使用すると文字に変換される。
\a
の代わりに \00000a
などとしても良い。
当然、改行でなくてもよい。
試しにCodePen上で \a
を \21
に変えてみると、改行ではなく !
になるはず。
white-space: pre について
white-space
プロパティは要素内の空白文字をどのように扱うかを定義する。
これが normal
や nowrap
だと改行文字は空白文字として扱われてしまう。
そのため、 pre
か pre-wrap
などを指定して、改行文字による行の折り返しを有効にしてやる必要がある。