snippet html css

CSSのcontent要素内で改行をする

本ページにはプロモーションが含まれる場合があります

CSSのcontent要素内で改行をする

疑似要素で長めのテキストを追加したいかつCSSの調整のみで済ませたい時に使いました。
普段はHTMLを触れば済むと思うのであまり使うことはないと思いますが、システムをフロント側からしか触れないような状況などに使えるかもしれません。

DEMO

error

HTML

<p class="content-pre">error</p>

CSS

.content-pre {
  display: flex;
}
.content-pre::after {
  content: 'メールアドレスが一致しません。\Aもう一度ご入力ください。';
  white-space: pre;
  margin-left: 20px;
}

content要素内の改行したいところに\Aを入れて、white-space: pre;を追加するだけです。
そのままだとcontent要素はpタグに指定した文字に回り込んでしまうため、display: flex;で横並びにします。必要に応じて指定してください。

-snippet, html, css