HTML

擬似要素の content 内で改行する方法

擬似要素の content 内で改行する方法を紹介します。

まずは content に改行コード「\A」を追加。
続いて white-space に pre を指定して改行コードを有効にします。

.example::before {
content: “今日は\A月が\A綺麗ですね";
white-space: pre;
}

表示が正しければ次のように表示されます。

content 内を改行コードだけにすると br タグを使わずに改行を挿入することもできます。

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

擬似要素の content 内で改行する方法を紹介しました。

この記事をシェアする