必要なときには忘れてるので備忘録。
.css-content::before {
content: '\A';
white-space: pre;
}white-space: pre がミソです。
指定する要素の「直前」で改行させたい場合は「::before」、
「直後」で改行させたい場合は「::after」で。当たり前か
メディアクエリで分岐させて、スマートフォン用のスタイルでのみ改行させたり
特殊な案件とかでhtmlをいじれない時、CSSのみで改行が出来るので何度か助けられました。
便利だけど、貴重なbefore・after疑似要素を使っちゃう（懐かしのclearfixとバッティングしたり）ので
なるべく普通に<br>タグで。最終手段です。
ちなみに
‘\A’ の \ はバックスラッシュです。
日本語配列のキーボードだとOption + ¥
USキーボードだとキーが有るのでキー1つで入力出来ます。
¥25,680 （2024/04/12 15:39時点 | 楽天市場調べ）
ポチップ
¥36,850 （2025/03/15 03:56時点 | 楽天市場調べ）
ポチップ
