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

react-native
この記事は約5分で読めます。

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

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

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

「\(バックスラッシュ)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;
}
<p class="content-sample-2"></p>

お、改行できましたね。この2つを組み合わせて改行を表現するんですね。でもなんで\n効かなくて\Aは可能なんだろうか。うーん、調べてみる価値ちょっと(ほんのちょっと)ありそうですね。

この「white-space: pre;」はcontent内の空白を表示するようにも出来ます。

CSSのcontentプロパティに文字列をセットするときは、上記のことを知っておけばつまずくことも、「出来ない」と噓こいちゃうこともなくなるので頭の片隅にでも置いておきましょう。

  • 改行したい位置に「\A」を記述。
  • white-space: pre; を同クラスに指定(親にかかっていればそれはそれで問題ないかも)

以上の2点が大事なことなので、何かの時に使ってやってくださいね。

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