Question

I have this simple CSS…

div:before {
    content: "G'day";   
    filter: alpha(opacity=40);
    -moz-opacity: .4;
    opacity: .4;
}

jsFiddle.

The :before pseudo element has the correct opacity in Firefox 6. In IE8, the opacity is not applied.

Typically, setting the opacity on the div works, but that isn’t what I want.

I tried adding display: block but it didn’t help.

Whilst I could workaround this, is there any trick to get IE8 to honour the opacity property on a :before (and :after for that matter) pseudo element?

Answer 1

I don’t think it’s possible.

I had the same problem a while back, and I ended up just working around it (by not using :before).

Here’s some sound reasoning as to why it’s not possible: Why does a filter gradient on a pseudo element not work in IE8?