Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to make IE8 honour opacity on an `:before` pseudo element?

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?

like image 668
alex Avatar asked Sep 22 '11 06:09

alex


1 Answers

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?

like image 118
thirtydot Avatar answered Nov 14 '22 06:11

thirtydot