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>