問題 × 解決策

疑似要素「before/after」に改行をさせる

問題

疑似要素「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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eighteen + 14 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧