Cannot rotate :after pseudo-element using CSS in IE8

Question

I have an absolutely-positioned box:

#box {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 100;
    top: 50px;
    left: 50px;
    border: 1px solid #000;
}

which has an "arrow" coming off it, really an absolutely-positioned square in an :after pseudo-element. To make it look like an arrow, I want to rotate the square 45 degrees counter-clockwise:

#box:after {
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    top: 10px;
    left: -6px;
    right: auto;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    background-color: #fff;
    content: "";
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

This works fine, except for IE8. To make it rotate in IE8, I added the rule:

#box:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865482, M12=0.7071067811865466, M21=-0.7071067811865466, M22=0.7071067811865482), SizingMethod='auto expand'";
}

However, this doesn't work. I've verified that the -ms-filter works: for example, if I apply that rule to the #box element, the #box rotates in IE8. But the :after pseudo-element doesn't recognize the -ms-filter rule. Does anybody know if it's possible to rotate an :after pseudo-element in IE8, and if so, how?

Answer 1

Filters do not work on Pseudo elements in IE8. No-can-do.

IF IE8 support is a must, your best bet is to make #box:after it's own div. Not the cleanest solution, but is any hack for IE8?