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?

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?

• javascript
• html
• css
• internet-explorer
• pseudo-element

2 Answers 2

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./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 uping triage. As soon as possible, we will have dev-cycles allocated for resolving the matter.

IE tends to have a lot of issues.

jQuery is a popular JavaScript library created with solving cross-browser issues in-mind. You can use jQuery's .attr() function to set your data attributes, like so:

setInterval(function () {
    $('body').attr('data-after', new Date());
}, 1000);

See: http://api.jquery./attr/

Alternatively, you can look into using jQuery's .data([key], [value]) method.

Note: Be careful using dates with Internet Explorer, in my experience its unable to parse some mon ISO 8601 date formats. I'd suggest another library for handling dates and times: moment.js