【CSS】「before」「after」などの「content」内で改行する方法

こんにちは、さちです。

先日、ウェブサイトを作っている時に、CSS の ::before ::after といった疑似要素内で「改行」をしたいことがありました。

HTML の知識で簡単できると思ったら全然そんなことはなかったので、備忘録として記事にまとめておきます。

やりたいこと

まず、やりたいことのサンプルを説明しておきます。

上図のように、<div> の中に通常のテキスト「虹ヶ咲学園」を記述します。

さらに、この <div> 内にある疑似要素 ::before に、content プロパティで「ラブライブ！」というテキストを追加します。

同じく、疑似要素 ::after に、content プロパティで「スクールアイドル同好会」というテキストを追加します。

疑似要素の ::before と ::after の前後は改行したいと考えています。

やってしまいがちなダメなパターンを紹介します。

<div class="target">虹ヶ咲学園</div>

.target::before {
  content: "ラブライブ！<br>";
}

.target::after {
  content: "\nスクールアイドル同好会";
}

改行失敗！

つまり、content 内で改行する方法は <br> でも \n でもありません。

<div class="target">虹ヶ咲学園</div>

.target::before {
  content: "ラブライブ！\A";
  white-space: pre;
}

.target::after {
  content: "\Aスクールアイドル同好会";
  white-space: pre;
}

content 内での「改行」は \A で行います。

ただし、\A だけでは「改行」ではなく「空白」になってしまいます。「改行」を反映するために white-space: pre; も追加しましょう。

改行できました！