ワードプレスのサイドバーのカスタマイズをしている際、とあるプラグインを設定したら、レイアウト上どうしても改行させて表示させたい部分なのに、プラグインなのでhtmlをいじれなくて どうすればいいか困っていました。
とくに致命的な問題ではないですが、やはり見やすさ レイアウトを考えるとだいぶ印象が違ってくるので、やはり直したいところです。
でもhtmlがいじれない CSSしかいじれない！！そんな状況になった時に便利な「CSSだけで改行する方法」をまとめておきます。
CSSだけで改行する方法
まず、移動させたい対象となる要素があったら、その直前にある要素をセレクタ名にして、この要素を基準に設定していきます。
記述のしかたは以下の2パターンになります。
基準にしたセレクタの後方で改行する場合
【CSS 】
1
.sample:after{
2
content: “\A“;
3
white-space: pre;
4
}
基準にしたセレクタの前方で改行する場合
【CSS 】
1
.sample:before{
2
content: “\A“;
3
white-space: pre;
4
}
PICK UP
TIPS記事セレクション
