CSS疑似要素（::beforeや::after）のcontent内で改行したり半角スペースを複数入力する方法

疑似要素を使うとタグの数をかなり減らせますし、CSSのみでツールチップの実装もできます。

ただ、疑似要素のcontent内では、普通に<br>タグでは改行できません。
今回は疑似要素内で改行する方法についてまとめておきます。

\Aを使用して改行する

まずは、改行したい位置で「\A」を入力します。
そのあとwhite-space: pre-wrap;を指定すると改行されます。

.tooltip::before {
  content: '説明文を\A改行します';
  white-space: pre-wrap;
}

「\A」は改行を示すコードで、「pre-wrap」を指定するとHTML上の改行や半角スペースがブラウザでの表示にそのまま反映されるようになり、その影響で改行コードを認識して改行してくれるようになります。
「white-space: pre;」でも改行されますが、これだと「\A」を入力しないと折り返されなくなってしまい、CSSやブラウザ幅によっては表示が崩れてしまう可能性があります。

pre-wrapはpreと同様に改行コードを判定しつつ、横幅に応じて自動折り返しもしてくれます。

小文字でも問題なく使える

大文字で紹介されていることが多いですが「\a」のように小文字でも機能します。

ちなみにcontent内では「\r」や「\n」「\r\n」の改行コードは使えなく、あくまで「\a」しか反映されないので注意が必要です。

半角スペースを複数入力する

content内では2つ以上半角スペースを入力しても1つ分しか隙間が空きません。
これも「white-space: pre-wrap;」や「pre」を指定すると、半角スペースを入力した分だけ隙間が空くようになります。

「

「\00a0」で半角スペースを入力する

a0」で半角スペースを入力する

「white-space」の指定をしなくても「\00a0」を入力すると半角スペースとして認識されて複数入力してもちゃんと隙間が空くようになります。

.tooltip::before {
  content: '説明文に\00a0\00a0\00a0半角スペースを複数入力します';
}

ちなみに英語を入力しようとすると、コードのすぐあとにアルファベットが続く影響で表示がおかしくなってしまうので、コードのあとにスペースを入れて区切りをつけるようにします。

.tooltip::before {
  content: 'tooltip\00a0\00a0\00a0 text';
}