[CSS]指定した位置で改行する方法( :after)

2018年7月20日2021年9月8日

レスポンシブデザインで制作する際、改行で困りました。html(br)で改行してしまうと、横幅が異なるデバイスで表示すると変な感じになってしまう場合がありますよね？::after　の疑似要素を使って改行させることが出来ます。

あわせて読みたい

[CSS] CSSで改行する、しないレスポンシブデザインで、デバイスによって改行させたい、改行させたくないという場合があると思います。そんな時は、CSSで制御する事が出来ます。あとは、@media scree…

例えば、

<h2><span>1行目の文章です。この後ろで改行させたい↓</span>2行目の文章</h2>

↓の後ろから次の行にしたいとします。
「1行目の文章です。この後ろで改行させたい↓2行目の文章」　と同一行で出力されるか、小さなデバイスの場合は変な所で改行されてしまう場合も。


/*--結果：
1行目の文章です。この後ろで改行させたい↓
2行目の文章--*/

/*改行させたい場合*/
h2 span::after {
     content: "\A";
     white-space: pre;
 }

/*改行させたくない場合*/
h2 span::after {
     content: "\A";
     white-space: nowrap;
 }

これなら@mediaでデバイス毎に設定も出来ますね。

CSS2では「:after」でしたが、CSS3で「::after」に変更されたそうです。

MDN Web Docs