JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test1">Hello World</div>
<br>
<div id="test2" data-extra=" of bar \A food">Hello World</div>

CSS

#test1:after {
    content : ' of foo \A barred';
    white-space: pre;
}
#test2:after {
    content : attr(data-extra);
    white-space: pre;
}