cssのcontent内で改行させる方法

cssのcontentでテキストを入れたときに改行させる方法のメモです。

\Aは改行コード
htmlでは\Aされないが、\Aの改行の効くpre要素と同様に扱うことで改行できる

See the Pen cssのcontentで改行させる方法 by takapen (@takapen) on CodePen.

html

white-space: pre;あり



white-space: pre;なし

css

div {
  padding: 0 0 40px;
}
p {
  position: relative;
}
p:before {
  content:"";
  width: 50px;
  height: 50px;
  background: #ccc;
  border-radius: 5px;
  position: absolute;
  top: 30px;
  left: 0;
}

p:after {
  content:"新着\A商品";
  width: 60px;
  height: 60px;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  line-height:1.1;
  position: absolute;
  top: 37px;
  left: 7px;
}
.ari:after {
  white-space: pre;
}
.nashi:after {
  /*white-space: pre;*/
}