JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test1">Hello World</div>
<br>
<div id="test2" data-extra=" of bar
  food">Hello World</div>
<br>
<div id="test3">Hello World</div>
<br>
<div id="test4" data-extra=" of something &#10; food">Hello World</div>
<br>
<div id="test5" data-extra=" of something2 &#xA; food">Hello World</div>

CSS

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

JavaScript

document.getElementById('test3').setAttribute('data-extra', " of baz \n food");