Is there a way to make IE8 honour opacity on an `:before` pseudo element?
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?
Why does a filter gradient on a pseudo element not work in IE8?
The question is "Why don't filters work on pseudo elements in IE8?" The following is as close to a definitive answer as I can muster. It comes from the information on this page.
The gradient
filter is a "procedural surface" (along with alphaimageloader
). A procedural surface is defined so:
Procedural surfaces are colored surfaces that display between the
content of an object and the object's background.
Read that carefully. It is essentially another "layer" you might say between the content of an object and that object's background. Do you see the answer to the question? What is created by :before
and :after
... Yes! Content. Specifically as MSDN notes:
The ::before and ::after pseudo-elements specify the location of
content before and after an element in the document tree. The content
attribute, in conjunction with these pseudo-elements, specifies what
is inserted.The generated content interacts with other boxes as if they were real
elements inserted just inside their associated element.
Now, if it is content that is generated, then it is not an "object" containing content, but the content itself (which happens to have some behavior similar to an element object that might contain content).
Thus, there is no "object" containing "content" (since it is content) between which the filter
can place a procedural surface for content generated by a pseudo-element (i.e. "false element"). A gradient
must be applied to the object, and then the procedural surface is placed between it and the content.
Try to use opacity in IE8
This are all the css codes for opacity:
.classname {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* IE 5-7 */
filter: alpha(opacity=80);
/* Netscape */
-moz-opacity: 0.8;
/* Safari 1.x */
-khtml-opacity: 0.8;
/* Good browsers */
opacity: 0.8;
}
Try to add all of these and it most likely works
How to change opacity of a Xul element at runtime?
Try setting the style as an attribute
document.getElementById("myId").setAttribute("style", "opacity: 0.5");
Related Topics
Stretch a Background Image in IE8
CSS Transition from 'Display: None' on Class Change
How to Apply Theme to Jupyter Lab
Is It Bad Practice to Use Negative Margins or Padding in CSS
When Using Column-Count, Overflowing Content Completely Disappears in All But First Column, Why
Change Color of Select Component's Border and Arrow Icon Material Ui
Image Mysteriously Ignoring Max-Width in Firefox & Ie
Are CSS Custom Properties Global Across Linked CSS Documents
CSS Fade Out Horizontal Rule/Line Styled Div Effect Without Images
Cannot Understand the Use of :Host in Components in Angular2
My Custom Font Doesn't Want to Work in Internet Explorer
How to Align About the Colon in Each Line of Text Like Movie Credits Often Do
CSS Difference Between Background: and Background-Image:
How to Center Variable Width Divs in CSS
How to Capitalize the First Letter of Each Word in CSS
Hovering Over CSS Transition in Safari Lightens Certain Font Color