CSSの::beforeや::afterのcontent内で改行させる方法

CSSの擬似要素である::beforeや::afterのcontent内で改行させる方法をご紹介いたします。

::beforeや::afterのcontent内で改行させる場合、改行させたい箇所に「\A」を入れます。


.sample::before {
  content: 'みなさん\Aこんにちは';
  white-space: pre;
}

このように「\A」を入れることで、”みなさん”と”こんにちは”の間で改行されます。

「white-space: pre;」を入れておかないと改行されないのでご注意ください。

また、画像を使う場合も同じように改行を入れることができます。


.sample::before {
  content: '画像\A' url("sample.png") '\A';
  white-space: pre;
}

このように指定すれば、”画像”の後ろとsample.pngの後ろで改行されます。

あとがき

擬似要素内で改行させたいというケースはあまりないかもしれませんが、覚えておくと便利です。