CSSのcontent内で改行する

CSSのcontentで指定したテキストを改行させる方法を調べたのでメモ。

サンプルコード

content内で改行させる場合、contentを指定している疑似要素にwhite-space: pre;を追加して、content内に「\A」を入れるといいようです。

HTML

<div class="sample">
テスト<span>てすと</span>テスト
</div>

CSS

.sample span::before,
.sample span::after {
	content: '\A';
	white-space: pre;
}

::beforeと::afterに開業を追加したので、要素の前後で改行されるようになりました。
content内で改行するデモページ
　

contentで指定したテキスト内に「\A」を追加して、改行することもできます。

HTML

<div class="sample"></div>

CSS

.sample::before {
	content: 'てすと\Aてすと\A';
	white-space: pre;
}

content内で改行するのデモページ2
　

【参考サイト】

• CSSでbrタグみたいに改行する方法
• 【CSS】beforeのcontentで改行する