How can I capture :after content in IE8?

Question

I am applying an :after pseudo element to the body displaying the name of my media query breakpoint like so:

body::after {
  content: 'medium';
  display: none;
}

The reason for doing this can be found here: http://adactio.com/journal/5429/

I want to get the content value of :after using javascript in IE8.

This is how i am doing it for other browsers:

var breakpoint = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

But IE8 does not support getComputedStyle(), i know it supports currentStyle instead, but after a bit of trying i was unable to use it correctly.

This is the kind of thing i was trying with no success:

var breakpoint = document.body.currentStyle.getPropertyValue('content');

Anybody know how to do this?

Edit: After BoltClock's note i have now changed my css to this (one semi colon):

body:after {
  content: 'medium';
  display: none;
}

Before using two the content was not even appearing in IE8, so it would have had nothing to return. Unfortunately i still can't get IE8 to return the content.

I am trying this:

if (style = document.body.currentStyle) {
  for (var prop in style) {
    if (prop === 'content') {
      alert(prop);
    }
  }
}

I get nothing, but if i change 'content' to some other property like 'backgroundColor' it will alert something. So i'm thinking that even though msdn lists content as one of the available properties of currentStyle http://msdn.microsoft.com/en-us/library/ie/ms535231%28v=vs.85%29.aspx it does not actually return it, unless i'm doing something else wrong.

IE8 doesn't support the double-colon version of `::after` either. If you need to support IE8, use `:after`. — BoltClock, Oct 18 '12 at 16:24
Thanks, i was hoping that would be the reason i couldn't get the value of the :after content but alas i still can't get ie8 to return anything. — codekipple, Oct 19 '12 at 08:40
Probably because `:after{}` does not count as the element's own style. Any chance you can use something like `document.styleSheets[0].cssRules`? — Passerby, Oct 19 '12 at 09:37
I'm afraid i was unable to get at it using document.styleSheets either. — codekipple, Oct 19 '12 at 12:53
Yes i would accept a jquery answer but as far as i'm aware jquery cannot get the content of pseudo elements. — codekipple, Oct 24 '12 at 13:56
I think this could help you: http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery — salih0vicX, Oct 22 '12 at 14:35

score 1 · Answer 1 · answered Oct 30 '12 at 11:58

After a lot of trying i've come to the conclusion that it is not possible. But thankfully i have found a js script which is achieving exactly what i was after.

https://github.com/JoshBarr/js-media-queries

As well as using Jeremy Keith's technique of putting the breakpoint label in the body:after they have put the breakpoint label in font-family on the html element. This enables support for ie8 and some cases where android was not able to return the :after content either.

user123123123 · Answer 2 · 2016-06-18T09:33:40.867

From IE7 to IE11, you can "create your own CSS Properties", and just access them by using the currentStyle object

Then a solution is to create a "fake content property"

body:after
{
    content: 'medium';
    -ms-content: 'medium';
}

I called it "-ms-content" for convenience, now your JavaScript code for IE should be:

document.body.currentStyle["-ms-content"] // RETURNS => 'medium'

You must access "your own property" by using the brackets: currentStyle[{String}] otherwise you will get an empty string

How can I capture :after content in IE8?

2 Answers2