ONZE/BLOGオンズ開発ブログ

CSSの擬似要素「::before」と「::after」のcontent内で改行させる方法を紹介します。

ポイントは疑似要素にwhite-space:pre;を追加すること。
そしてcontent内の改行させたい箇所に\Aを挿入します。

具体的には次のようなコードになります。

HTML

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

CSS

.sample::after {
content: 'みなさん\Aこんにちは';
white-space:pre;
}

コレで「\A」の箇所で改行されるようになります。