MENU

CSSのみで改行!疑似要素のcontentで改行する方法

必要なときには忘れてるので備忘録。

.css-content::before {
  content: '\A';
  white-space: pre;
}

white-space: pre がミソです。

指定する要素の「直前」で改行させたい場合は「::before」、
「直後」で改行させたい場合は「::after」で。当たり前か

メディアクエリで分岐させて、スマートフォン用のスタイルでのみ改行させたり
特殊な案件とかでhtmlをいじれない時、CSSのみで改行が出来るので何度か助けられました。

便利だけど、貴重なbefore・after疑似要素を使っちゃう(懐かしのclearfixとバッティングしたり)ので
なるべく普通に<br>タグで。最終手段です。

ちなみに

‘\A’ の \ はバックスラッシュです。
日本語配列のキーボードだとOption + ¥
USキーボードだとキーが有るのでキー1つで入力出来ます。

¥35,200 (2021/10/18 15:24時点 | 楽天市場調べ)
よかったらシェアしてください!
もくじ
閉じる