Internet Explorer 11 does not update the content of pseudoelements

Question

I've come across a strange issue with my code. Here is what I have:

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

Initially, everything works perfectly fine (the value is displayed on the screen) until I decide to change this attribute to something else:

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

Oddly enough, the content does not update on the screen even though the DOM explorer clearly shows that the attribute value has been updated.

I attempted to manually set it through the browser console as well, but still no luck.

Interestingly, everything functions correctly in other browsers, except for IE... you know how it goes.

So here's the million-dollar question: Can I somehow force an update of this value so that it reflects on the screen when altered?

Answer 1

Answer №1

It's puzzling that IE11 fails to update the DOM when you modify an element's dataset.

If you must cater to IE11, consider using the Element.setAttribute method like this:

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

By doing so, the DOM should be refreshed and the pseudoelement content ought to reflect the changes made.

Answer 2

It's puzzling that IE11 fails to update the DOM when you modify an element's dataset.

If you must cater to IE11, consider using the Element.setAttribute method like this:

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

By doing so, the DOM should be refreshed and the pseudoelement content ought to reflect the changes made.