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

HTMLタグの改行コード<br>を使わずにCSSだけで改行したい場合があります。
そんな時に使えるテクニックです。

::beforeを使う場合（spanの前で改行します。）

【CSS】※::beforeの場合

.br::before {
    content: "\A";
    white-space: pre;
}

【HTML】

<p>あいうえお<span class="br">かきくけこ</span>さしすせそ</p>

【表示例】

See the Pen Untitled by Ketsunosuke (@onoredekaiketsu) on CodePen.

【CSS】※::afterの場合

.br::after {
    content: "\A";
    white-space: pre;
}

【HTML】

<p>あいうえお<span class="br">かきくけこ</span>さしすせそ</p>

【表示例】

See the Pen Untitled by Ketsunosuke (@onoredekaiketsu) on CodePen.

【CSS】※display: blockを利用する場合

p span {
  display: block;
}

【HTML】

<p><span>あいうえおかきくけこ</span><span>さしすせそ</span></p>

【表示例】

See the Pen Untitled by Ketsunosuke (@onoredekaiketsu) on CodePen.

以上で解決です。