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...&#xa;This may take some minutes');

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

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

Serge K. · Accepted Answer · 2019-02-20 14:31:54Z

8

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>

edited Feb 20, 2019 at 14:31

Serge K.

5,3331 gold badge22 silver badges27 bronze badges

answered Feb 20, 2019 at 14:14

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mojimi Over a year ago

Wow... full circle huh

Mouser · Accepted Answer · 2019-02-20 14:25:07Z

6

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>

edited Feb 20, 2019 at 14:25

answered Feb 20, 2019 at 14:19

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related