問題
疑似要素「before／after」に改行をさせたい。
解決策
content内で改行したい箇所に「\A」を挿入する。
疑似要素に改行を適用させる。
疑似要素「before／after」のcontentで改行を行えると、様々な場面で活用することができます。
今回は疑似要素「before／after」に改行をさせる方法をご紹介します。
DEMOはこちら
元のテキスト（疑似要素を使っていない状態）
テキストテキストテキスト
疑似要素「before」を改行させた場合
テキストテキストテキスト
疑似要素「after」を改行させた場合
テキストテキストテキスト
HTMLの構築
pタグを用意します。
- ※便宜上、クラス「newline」を設定しています。
<p class="newline type_b">テキストテキストテキスト</p>
<p class="newline type_a">テキストテキストテキスト</p>CSSの構築
クラス「newline」に対し、CSSを設定します。
クラス「type_b」にbefore、クラス「type_a」にafterを設定します。
.newline.type_b:before{
content: "before要素を\A改行させます。\A";
white-space: pre;
}
.newline.type_a:after{
content: "after要素を\A改行させます。\A";
white-space: pre;
}ポイント!
「white-space: pre;」を合わせて設定することで、改行を実現することができます。
参考
【【CSS】beforeのcontentで改行する – めめんと】
https://mementoo.info/archives/665
コメント