CSS pseudo-element content value with line-break via attr inserted by Javascript

Question

There's a similar discussion here : CSS data attribute new line character & pseudo-element content value

Problem is, this didn't work if the attr is set via Javascript

I understand that \A doesn't work in attr, but now 
 doesn't work on attr via Javascript, is there any way to get this working?

const ele = document.getElementById('my-ele')
ele.classList.add('loading');
ele.setAttribute('loading-text', 'Your file is being generated...
This may take some minutes');

.loading::after {
  content: attr(loading-text);
}

<div id="my-ele"></div>

Answer 1

Use a plain newline character (\n in your JavaScript string), fix the getElementById() call (get rid of "#"), and add white-space: pre-wrap; to the CSS.

const ele = document.getElementById('my-ele')
ele.classList.add('loading');
ele.setAttribute('loading-text', 'Your file is being generated...\nThis may take some minutes');

.loading::after {
  white-space: pre-wrap;
  content: attr(loading-text);
}

<div id="my-ele"></div>

Answer 2

It's the line feed character &#10. \u000A is the JS equivalent and will make it work.

const ele = document.getElementById('my-ele'); //removed the #
ele.classList.add('loading');
ele.setAttribute('loading-text', 'Your file is being generated...\u000AThis may take some minutes');

const ele2 = document.getElementById('my-ele2'); //removed the #
ele2.classList.add('loading');
ele2.setAttribute('loading-text', 'Your file is being generated...\nThis may take some minutes'); //as suggested by Pointy also works!

.loading::after {
white-space: pre-wrap;
  content: attr(loading-text);
}

<div id="my-ele"></div>

<div id="my-ele2"></div>