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

WEBデザイン

2018.09.202018.12.03

<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>

【表示例】

あいうえお
かきくけこさしすせそ

【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>

【表示例】

あいうえおかきくけこ
さしすせそ

以上です。