目次
はじめに
福岡のホームページ制作・SEO対策の株式会社スゴヨクです。
CSSの疑似要素「::before」、「::after」を使用する際に、content内のテキストに改行を入れたくなったことはありませんか？
やり方を知らないと手間取ってしまいがちですが、知っていればあっという間に実装できますので、こちらになるべくわかりやすく書き残しておきたいと思います。
簡単2STEPです
その1：white-spaceプロパティを指定する
疑似要素のcontent内で改行を扱うには、white-space:pre;またはwhite-space:pre-wrap;を指定する必要があります。
white-spaceプロパティは、行の折り返し地点（要素のボックスの端）で自動的に改行をするか、空白が連続している場合に一つの空白にするか、改行を空白に置き換えるかなど、改行や空白の扱いを指定するものです。
→「white-spaceプロパティ」についてはこちらからwhite-space:pre;は、改行や連続する空白をそのまま表示します。 ボックスの端では自動的な折り返しは行いません。
一方のwhite-space:pre-wrap;は、同じく改行や連続する空白をそのまま表示しますが、ボックスの端で自動的に折り返しを行います。
その2：改行したい位置に「\A」を入れる
white-spaceプロパティの指定をしたら、あとは改行したい箇所に「\A」（バックスラッシュ or 円マーク）を入れるだけで改行することができます。
HTML
疑似要素のcontent内で改行したい
CSS
.txt{
content:"before\Aafter";
white-space: pre;
}
おわりに
あっという間に実装できますので、ぜひ活用してみてください。
CSS疑似要素のcontent内に改行を入れたくて困っている方、勉強中の方の参考になれば幸いです。
