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

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

目次[ 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エンジニア

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