【CSS 疑似要素】before, afterのcontentプロパティ内で文章を改行する方法

react-native

2023.02.062023.02.14

やむを得ずHTML内の文章をCSSで入れ込むことが稀にあります。その方法こそ「content: "～"」です。これはおなじみなので特に説明の必要もないかと思います。

しかし、このcontent内の文章に改行や空白を入れたいときは少しトリッキーなことをしないといけません。

content内で改行させたい場合、改行位置に「\A」を記載し、「white-space: pre;」を指定すれば改行出来ます。

「\（バックスラッシュ）A」その名もベル文字
1. サンプル
white-space:pre
1. サンプル

「\（バックスラッシュ）A」その名もベル文字

まずは文章内で改行したい位置に「\（バックスラッシュ）A」というCSSではほぼほぼ使わない文字列を利用します。あれ、普通に「\n」で良くない？と思った上級者の方、実はこれうまくいかないんです。「n」って文字が出ちゃうんです……なぜに(´;ω;｀)気になったら是非やってみてください。

このバックスラッシュAというのは、特殊文字（正確には制御文字）の一種で、その昔のコンピューティングにおける通知音（ベル）を鳴らす為に使われていたものです。その意味通り「ベル文字」と言います。

このベル文字「\（バックスラッシュ）A」の「A」は「Alert」や「Audible」の頭文字なんですね。小ネタですが覚えておくと周りから「へぇ」が稼げるかもしれません。え、「ベル」文字なんだから「B」で良くない？と思った方、するどい。残念ながら「B」は「\B」としてバックスペースに使われてしまっていたのでした。

ちなみにバックスラッシュのキーボードの場所ですが、スラッシュの右隣にあるかと思います。キーボードの種類によっては違うかも……？

という訳でサンプルを以下に示します。contentの途中に「\A」を入れてみました。

サンプル

.content-sample {
  background: #000;
  color: #FFF;
}
.content-sample::before {
  content: "この後ろに改行をいれたい。\Aどうでしょうか。";
}

<p class="content-sample"></p>

あら、何も出ませんし、改行もされません。

そこでこのクラスに「white-space:pre」というプロパティを指定してあげる必要があります。

white-space:pre

MDN公式によれば

連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、
要素でのみ行います。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space

ということなので、「/A」が改行文字として認識されるはず、、なんか微妙にごまかされた感じがするのは僕だけ？

サンプル

.content-sample-2 {
  background: #000;
  color: #FFF;
}
.content-sample-2::before {
  content: "この後ろに改行をいれたい。\Aどうでしょうか。\Awhite-space: pre;入れてみました。";
  white-space: pre;
}