br要素を使わずにCSSだけで改行する方法

::befor::after といった疑似要素の content\a を入れることで改行できる。

コード例

.foo::after {
    content: '\a';
    white-space: pre;
}

サンプル

codepen.io

解説

content: '\a' について

\a というのは改行を表している。
改行(厳密に言うとLF)はUnicodeで U+000A であり、contentプロパティに渡す文字列内では、エスケープ文字 \ をつけてUnicodeを使用すると文字に変換される。
\a の代わりに \00000a などとしても良い。

Newline - Wikipedia

当然、改行でなくてもよい。
試しにCodePen上で \a\21 に変えてみると、改行ではなく ! になるはず。

white-space: pre について

white-space プロパティは要素内の空白文字をどのように扱うかを定義する。
これが normalnowrap だと改行文字は空白文字として扱われてしまう。

そのため、 prepre-wrap などを指定して、改行文字による行の折り返しを有効にしてやる必要がある。