Pseudoelement's content doesn't get updated in IE11

Question

I have the following code:

someSelector:after {
  content: attr('data-some-data');
  /* ... */
}

Everything works fine (the value is reflected on the screen) until I change this attribute to something else:

document.querySelector('someSelector').dataset.someData = 'some other value';

The content doesn't get updated on the screen but when I open the DOM explorer I can clearly see, that the value of the attribute is indeed updated.

I tried to set this manually through the browser console but also with no success.

Everything works correctly in other browsers but of course in IE... You know...

Is it possible to force an update of this value so it will be reflected on the screen when changed?

dataset is not part of the css engine. I think you have to use an event listener on some element.. The Javascript that is using data-some-data requires this feature. — bron, Aug 24 '20 at 14:39
@bron you're not understanding problem which OP posted. CSS "attr" should be able to read any attribute present on the html element and update whenever it is changed. That is only IE weird behaviour. — Magiczne, Aug 24 '20 at 14:44

score 1 · Accepted Answer · answered Aug 24 '20 at 14:40

IE11 for some unknown reason does not redraw DOM when you modify element dataset.

But if you have to support IE11 use Element.setAttribute method like so:

document.querySelector('someSelector').setAttribute('data-some-data', 'some other value');

DOM will be redrawn and the pseudoelement content should be updated.

1 Answers1