cssのcontentのテキストを改行する

\A と white-space: pre; で改行してます。




サンプル

See the Pen cssのcontentのテキストを改行する by takapen (@takapen) on CodePen.

html

css

.aaa {
  width: 100px;
  height: 40px;
  position: relative;
}
.aaa:before {
  content: "あいうえ";
  padding:10px;
  background: #ccc;
  border-radius:50%;
  position: absolute;
}

.bbb {
  width: 100px;
  height: 40px;
  position: relative;
}
.bbb:before {
  content: "あ い\Aうえ";/* \A 改行コード */
  padding:10px;
  white-space: pre;/* HTML内の改行や半角スペースなどがブラウザにそのまま反映。自動的な改行はされない */
  background: #ccc;
  border-radius:50%;
  position: absolute;
}