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

を使わずにCSSだけで改行する方法 WEBデザイン

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

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

【CSS】※::beforeの場合

【HTML】

【表示例】

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

::afterを使う場合(spanの後で改行します。)

【CSS】※::afterの場合

【HTML】

【表示例】

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

display: blockを利用する場合(spanごとに改行します。)

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

【HTML】

【表示例】

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

以上で解決です。