【HTML・CSS】疑似要素のテキストを途中で改行させる方法

【予備知識】疑似要素にテキストを表示させる方法

念のため、疑似要素にテキストを表示させる方法のおさらいです。

疑似要素にテキストを表示させるには、CSSで::beforeまたは::afterに対してcontentプロパティを指定してテキストを入力します。

<p class="text">テキストを表示させるには、</p>

.text::before {
  content: "疑似要素に";
  color: blue;
}

.text::after {
  content: "ここにテキストを入力するよ！";
  color: red;
}

::beforeは要素の前に、::afterは要素の後ろにテキストが追加されているのが確認できますね。

<br>だと改行してくれない

サイトのデザインによっては、疑似要素に表示したテキストを改行させたい場合もあるでしょう。

しかし疑似要素のテキストを改行させたい場合に<br>と入力しても、タグがテキスト認識されて上手く改行してくれません。

<p class="kaigyo"></p>

.kaigyo::before {
  content: "改行<br>してほしいです";
}

疑似要素のテキストを改行させる方法

疑似要素に表示したテキストを改行させたい場合は以下のように入力します。

<p class="kaigyo"></p>

.kaigyo::before {
  content: "改行\Aしてほしいです";
  white-space: pre;
}

CSS2行目でcontentの改行したい位置に「\A」と入力。3行目でwhite-space: pre;を指定。

\（バックスラッシュ）はキーボード右上にある￥のキーを押せば入力できるよ！

これで以下の様に「\A」の位置で改行してくれます。