12

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
alex
  • 479,566
  • 201
  • 878
  • 984
  • I don't think it's possible. I had the same problem a while back, and I ended up just working around it. – thirtydot Sep 26 '11 at 22:59
  • @thirtydot: Thanks for checking it out for me. If you post that as an answer, I'll accept it. – alex Sep 26 '11 at 23:09

1 Answers1

20

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?

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349