Why does a filter gradient on a pseudo element not work in IE8?

Question

I want to create buttons like these:

In modern browsers the effect is created using inset box-shadow and filters.
For IE8 - pseudo-elements are chosen.

Answer 1

The documentation on -ms-filter -a synonym for filter- states:

An object must have layout for the filter to render.

My first guess was that the :before content doesn't have hasLayout set to true. And while it's probably not set to true, it's probably not set to false either. For starters, when I followed the hasLayout docs to force the content to get hasLayout = true (see jsfiddle) it didn't solve anything.

So I'd say it's neither true nor false. Instead, it's probably undefined. I noted in the same docs it says about the source of this property:

object.currentStyle.hasLayout

If we have a look at the W3 documentation on the content property it says:

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

So, a possible conclusion would be that the generated content is not an object, as such it does not have a currentStyle property, and thus also doesn't have hasLayout set to true. This would be the reason that filters don't work on the generated content, and thus answer the question.

---

At first sight I thought I had found a hint in the console of the above fiddle:

document.querySelectorAll('div')[0].currentStyle.hasLayout; 
// true

document.querySelectorAll('div:before')[0].currentStyle.hasLayout
// Unable to get value of the property 'currentStyle': 
// object is null or undefined

But as mentioned in the comments by @BoltClock: querySelectorAll cannot access pseudo-elements.

---

Another hint (though -again- nothing more than a hint) that filter won't work on pseudo-elements can be found in this msdn introduction on filters, stating (emphasis mine):

Filters are applied to HTML controls through the filter property

Although I'm not sure what is meant by "HTML controls", I wouldn't expect content generated by the :before pseudo-element to be considered a "HTML Control".