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

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>


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>

Tags:

Javascript

Html

Css

Recent Posts