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

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

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

【CSS】※::beforeの場合

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

.br::before {

content: "\A";

white-space: pre;

}

【HTML】

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

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

【表示例】

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

【CSS】※::afterの場合

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

.br::after {

content: "\A";

white-space: pre;

}

【HTML】

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

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

【表示例】

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

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

p span {
  display: block;
}

p span {

display: block;

}

【HTML】

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

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

【表示例】

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

以上で解決です。