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

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

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

【CSS】※::beforeの場合

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

.br::before {

content: "\A";

white-space: pre;

}

【HTML】

&lt;p&gt;あいうえお&lt;span class="br"&gt;かきくけこ&lt;/span&gt;さしすせそ&lt;/p&gt;

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

【表示例】

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

【CSS】※::afterの場合

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

.br::after {

content: "\A";

white-space: pre;

}

【HTML】

&lt;p&gt;あいうえお&lt;span class="br"&gt;かきくけこ&lt;/span&gt;さしすせそ&lt;/p&gt;

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

【表示例】

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

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

p span {
  display: block;
}

p span {

display: block;

}

【HTML】

&lt;p&gt;&lt;span&gt;あいうえおかきくけこ&lt;/span&gt;&lt;span&gt;さしすせそ&lt;/span&gt;&lt;/p&gt;

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

【表示例】

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

以上で解決です。