macoblog

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

【CSS】content内で改行を使用する方法【疑似要素/before・after】

CSS

この記事では、CSSの:before:aftercontent:''内で改行を使用する方法について解説しています。疑似要素で使用する文字列に改行を適用したい時にご活用ください。

目次【本記事の内容】 [ click ]

CSSのcontent内で改行する方法

疑似要素で使用するcontent:''内で改行を使用する場合はwhite-space: pre;を適用すればOKです、サンプルコードは下記の通りです。

.heading::before{
  content: "この後に改行\Aこの後に改行\A";
  white-space: pre;
}
2行目、content内に\Aを記述します、これが改行の役目を果たします。
3行目、white-spaceプロパティの値にpreを指定します、これを指定しないと2行目の改行コードが効かないので注意。

折り返しが効かない場合

先ほどの例でいくとcontent内で改行は効いても文字が折り返されません、長文の場合ボックスからはみ出てしまうので、content内で改行しつつ折り返したい場合はwhite-space: pre-wrap;を適用すればOKです、サンプルコードは下記の通りです。

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

画像と組み合わせたい場合

画像と組み合わせたい時は下記のようにします。

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

content内で改行を使用する機械は多くはないけどある時はある、WordPressの見出しをカスタマイズする時とかね。そんな時にアタフタしがちなので備忘録として残しておくぜー。ってか画像と文字列を一緒に指定できるのは意外だったな。