<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 food">Hello World</div> <br> <div id="test5" data-extra=" of something2 
 food">Hello World</div>
document.getElementById('test3').setAttribute('data-extra', " of baz \n food");
#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; }