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

この記事は約2分で読めます。
記事内に広告が含まれています

コーディングのイメージ

こんにちは、さち です。

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

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

スポンサーリンク

やりたいこと

表示サンプル

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

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

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

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

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

「br」「\n」ではダメ!

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

ソース

<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; も追加しましょう

結果

表示サンプル

改行できました!

コメント

タイトルとURLをコピーしました