cssinternet-explorer-11css-content

Pseudoelement's content doesn't get updated in IE11

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...

The question

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

Solution

  • 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.