Updating pseudo-element content property when HTMLElement.dataset updates

Question

I am using the CSS attr function to dynamically link the value of a data-* attribute to the content of a pseudo element:

body::after { content: attr(data-after) }

I am then regularly updating that data attribute via the HTMLElement.dataset property:

setInterval(function () {
    document.body.dataset.after = new Date;
}, 1000);

I'm noticing that in Internet Explorer, though all of these features are supported, the pseudo-element is not having its content property updated to reflect the most recent changes.

I have built a fiddle to demonstrate the problem. You may view it online here.

What can I do to work around this limitation?

Answer 1

There is a known bug/limitation in Internet Explorer right now that causes pseudo elements to not be updated when datasets update. A sufficient work-around is to instead update the attributes with the older (and thus more broadly supported) setAttribute method:

setInterval(function () {
    // Work-around for IE bug: http://stackoverflow.com/q/28031707
    document.body.setAttribute( "data-after", new Date );
}, 1000 );

You can see the results here.

A bug has been filed against this issue internally and the appropriate feature teams should be evaluating the matter in an upcoming triage. As soon as possible, we will have dev-cycles allocated for resolving the matter.