How to break line in Pseudo Content element ::after or ::before?

Question

Is there any way to break the line of a text that is in content of a pseudo element type o ::after or the ::before ?

Whereas something like this: content: "<br> não quebra?"; or this content: "não <br> quebra?"; will not work, what options would we have for this line of content ::after "fall" to the bottom line?

.z::after {
  content: "::after não quebra?";
  color: red;
}
.z.x::after {
  content: "::after <br> não quebra?";
}

<span class="z">como quebrar a linha aqui | </span><br>
<span class="z x">como quebrar a linha aqui | </span><br>

Answer 1

It is possible, according to specification content the line break occurs with the escaped character \A, but you need another property white-space as long as the value is pre (pre, pre-line or pre-wrap).

.z::after {
  content: "::after não quebra?";
  color: red;
}
.z.x::after {
  content: "::after \A quebrou?";
  white-space: pre-wrap;
}

<span class="z">como quebrar a linha aqui | </span><br>
<span class="z x">como quebrar a linha aqui | </span><br>

Answer 2

Use " A" to break the line in conjunction with "white-space: pre;"

.z::after {
  white-space: pre;
  content: "::after \A quebra?";
  color: red;
}
.z.x::after {
  white-space: pre;
  content: "::after \A quebra?";
}

<span class="z">como quebrar a linha aqui | </span><br>
<span class="z x">como quebrar a linha aqui | </span><br>

Source