CSSの擬似要素:beforeや:afterのcontent内の任意の位置で改行する

CSSの擬似要素はとても便利ですよね。タグの数をかなり減らせることができてソースコードが見やすくなります。擬似要素を使う際、content 内で改行できたらなと思ったことはないでしょうか。実は改行することはできるのです。その方法を紹介したいと思います。

擬似要素内で改行する

擬似要素のcontent内で改行できる

.elm:before {
  content: '実は、';
}

普通に :before で擬似要素を追加するとこのようにインライン要素になってしまいます。

擬似要素のcontent内で改行できる

.elm:before {
  content: '実は、\A';
  white-space: pre;
}

改行したい位置で \A を入力し、white-space: pre; を指定すると改行することができます。

擬似要素のcontent内で改行できる

.elm:before {
  content: '実\Aは\A、\A';
  white-space: pre;
}

\A は <br> タグのようなもので、このように何度も使えて、挿入した位置で改行されます。

応用してみよう

擬似要素のcontent内で改行できる

.elm:before {
  display: table-cell;
  width: 9999px;
  height: 300px;
  content: 'こんな風に\A画像に文字を\A重ねることもできます';
  text-align: center;
  line-height: 1.62;
  vertical-align: middle;
  text-shadow: 0 1px #000;
  white-space: pre;
  font-size: 18px;
  background-position: center;
  background-image: url('https://unsplash.it/1080/720/?image=723&blur');
}

このようにカスタマイズすれば今まで無駄にタグを追加していたのが１つの <div> タグでできてしまいます。

widthを9999pxにしているわけ

width: 9999px;

実は、table-cell には width: 100%; を指定することはできません。その代わり、横幅をpxで指定するとき、100%をオーバーしても自動的に100%の範囲におさまるという性質があります。なので、大きめの 9999px を指定しています。