今回は疑似要素::beforeと::afterでの改行について解説します。content:''内で自分の好きな位置で文を改行したいことってありますよね。CSSの引用符で囲んだ文字列には、そのまま改行を入力できません。改行文字はエスケープの\Aで指定し、以下のようにwhite-spaceで保持します。

1. CSSのcontent内で改行する方法

white-space:preを指定＋改行したい位置で\Aと書く

実際に例を見てみるのが分かりやすいですね。

HTMLコード
<p id="example">こんにちは</p>
CSSコード
#example::before{
	white-space: pre;
	content: 'ウェーイ\Aフゥー！';
	font-size: 2em;
}
ブラウザ表示改行する例

white-space: preは、空白や改行文字を保持し、自動では折り返さない指定です。この例では文字列内の\Aが改行文字になります。詳しくは以下の記事が参考になるはずです。

あわせて読みたいCSSのwhite-spaceの使い方：pre、wrap、nowrapなどの違いは？

ボックスの端で自動で折り返す

white-space: preは明示的な改行文字を保持しますが、ボックスの幅に合わせた自動折り返しは行いません。そのため、長い行はボックスからはみ出します。

ボックスの端でも折り返されない

このようにはみ出てしまうわけですね。ちょっと困りますよね。

空白や改行文字を保持しながら自動で折り返したい場合は、white-space: pre-wrapとします。折り返し可能な位置でボックス幅に合わせて折り返します。次のCSSも、最初の例のHTMLに適用します。

CSSコード
#example{
	width: 200px;
	padding:10px;
	background:#EFEFEF;}
#example::before{
	white-space: pre-wrap;
	content: 'ウェーイウェーイウェーイウェーイ\Aフゥー！';
	font-size: 2em;
}
ブラウザ表示端で折り返す

この例ではボックス幅に合わせて自動で折り返され、さらに\Aを指定した部分で改行されます。折り返せる位置がない長い文字列は、pre-wrapでもはみ出すことがあります。

2. content内で好きなだけスペースを空ける方法

white-space: pre-wrapを指定するだけ

次にスペースを空ける方法です。CSSのwhite-spaceプロパティの初期値はnormalで、親要素から継承されます。適用される値がnormalの場合、content内の連続する半角スペースは1つぶんにまとめられます。対処法は、white-space: pre-wrapもしくはpreを指定することです。これで、連打した分だけ反映されるようになります。

HTMLコード
<p id="example">こんにちは</p>
CSSコード
#example::before{
	white-space: pre-wrap;
	content: 'ウェーイ    フゥー！';
	font-size: 1.5em;
}
ブラウザ表示例

さきほども触れましたが、pre-wrapではボックス幅に合わせて折り返し可能な位置で自動で折り返されます。preだと自動で折り返されることはありません。