macoblog

「ゲーム × プログラミング」で生きていく

アプリ検索ツール(β版)を公開

【CSS】beforeやafterのcontent内で改行を使う方法

CSS プログラミング

疑似要素「::before」を使って改行を挿入したい、そんな時に使えるコードを備忘録として残しておきます。

簡単に使えますので、cssが苦手なかた勉強を始めたばかりの方は参考にどうぞ。

「brで改行すれば思うようなデザインになるけどデザイン目的で使うのはちょっと・・・」、こんな時に使えます。

簡単すぎて忘れてしまいがちなので記事に残しながらシェアしますね。

方法は簡単です

疑似要素「before」に下記のように指定すればOKです。

.heading::before{
  content: "この後に改行\Aこの後に改行\A";
  white-space: pre;
}

ポイントは2つ

2行目のcontent内に\Aを記述します、これが改行の役目を果たします。

3行目のwhite-spaceプロパティの値にpreを指定します、これを指定しないと2行目の改行が効きませんので注意。

たったこれだけす、簡単ですね。

忘れないようにしましょう!

wordpressのテーマカスタマイズで使える事も

管理画面内でカスタマイズが完結するようなテーマの場合。

「子見出しにアルファベットやフリガナを付けたいんだけど、テキストボックスだから一行で繋がってしまう」

なんてことがあります、テキストエリアで改行を許容している項目なら問題ありませんが、

作り手の加減でここは一行だ!っていう項目の場合大変ですよね、わざわざbrを認識しないようにしてくれていたりもしますし。

そういう時は疑似要素で内容と改行を追加してあげれば簡単です、多少知識は必要ですが、そこそこ触れる方であれば簡単です。

おまけ

画像と組み合わせることも可能です

.content::before{
  content: "画像タイトル\A" url("sample.jpg") "\A";
  white-space: pre;
}

便利ですね、疑似要素。

以上になります。

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。