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?

See http://stackoverflow.com/questions/10403916/why-does-a-filter-gradient-on-a-pseudo-element-not-work-in-ie8 — Aibrean, Jun 30 '14 at 16:25

score 3 · Accepted Answer · answered Jun 30 '14 at 16:59

3

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?

answered Jun 30 '14 at 16:59

Jason

4,079
4
22
32

Thanks; it's helpful just to be told it's not possible. I don't think I can create a new div just for IE8, but I'll look into it. – Chris Sellers Jun 30 '14 at 17:19

score 0 · Answer 2 · edited May 23 '17 at 10:28

IE8 has partial support for Pseudo elements... Check this Link
:after to work in IE8, a <!DOCTYPE> must be declared. Also,

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

You'll note from the above that IE8 has different syntax to IE6/7. You need to supply both lines of code if you want to support all versions of IE.

I have taken some of the portion From this excellent answer.

CSS rotate property in IE

good luck!

Thanks, but I'm aware of these things. I do have a declared. I don't need to support IE6/7. — Chris Sellers, Jun 30 '14 at 17:18

Cannot rotate :after pseudo-element using CSS in IE8

2 Answers2