こんにちは、さち です。
先日、ウェブサイトを作っている時に、CSS の ::before
::after
といった疑似要素内で「改行」をしたいことがありました。
HTML の知識で簡単できると思ったら全然そんなことはなかったので、備忘録として記事にまとめておきます。
やりたいこと
まず、やりたいことのサンプルを説明しておきます。
上図のように、<div>
の中に通常のテキスト「虹ヶ咲学園」を記述します。
さらに、この <div>
内にある疑似要素 ::before
に、content
プロパティで「ラブライブ!」というテキストを追加します。
同じく、疑似要素 ::after
に、content
プロパティで「スクールアイドル同好会」というテキストを追加します。
疑似要素の ::before
と ::after
の前後は改行したいと考えています。
「br」「\n」ではダメ!
やってしまいがちなダメなパターンを紹介します。
ソース
<div class="target">虹ヶ咲学園</div>
.target::before { content: "ラブライブ!<br>"; } .target::after { content: "\nスクールアイドル同好会"; }
結果
改行失敗!
つまり、content
内で改行する方法は <br>
でも \n
でもありません。
解決方法
ソース
<div class="target">虹ヶ咲学園</div>
.target::before { content: "ラブライブ!\A"; white-space: pre; } .target::after { content: "\Aスクールアイドル同好会"; white-space: pre; }
content
内での「改行」は \A
で行います。
ただし、\A
だけでは「改行」ではなく「空白」になってしまいます。「改行」を反映するために white-space: pre;
も追加しましょう。
結果
改行できました!
コメント