Add line break to ::after or ::before pseudo-element content

The content property states:

Authors may include newlines in the generated content by writing the “\A” escape sequence in one of the strings after the ‘content’ property. This inserted line break is still subject to the ‘white-space’ property. See “Strings” and “Characters and case” for more information on the “\A” escape sequence.

So you can use:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */

When escaping arbitrary strings, however, it’s advisable to use \00000a instead of \A, because any number or [a-f] character followed by the new line may give unpredictable results:

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;

Leave a Comment