Why does a filter gradient on a pseudo element not work in IE8?

by

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.

More Related Contents:

  1. Can't get footer image to display in IE8?
  2. Can I use a :before or :after pseudo-element on an input field?
  3. Font Awesome 5 on pseudo elements shows square instead of icon
  4. IE8 issue with Twitter Bootstrap 3
  5. IE8 support for CSS Media Query
  6. Html/Css Triangle with pseudo elements
  7. :after and :before CSS pseudo elements hack for Internet Explorer 7
  8. CSS content property: is it possible to insert HTML instead of Text?
  9. Elongated hexagon shaped button using only one element
  10. Using “margin: 0 auto;” in Internet Explorer 8
  11. Using CSS :before and :after pseudo-elements with inline CSS?
  12. Table tbody scroll in IE8
  13. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  14. Can a ::before selector be used with a ?
  15. CSS data attribute new line character & pseudo-element content value
  16. Which elements support the ::before and ::after pseudo-elements?
  17. Hover effects not working with IE8
  18. header/footer/nav tags – what happens to these in IE7, IE8 and browsers than don’t support HTML5?
  19. Will targeting IE8 with conditional comments work?
  20. Using attr(data-icon) property to display unicode before element
  21. after pseudo element not appearing in code
  22. How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?
  23. pseudo-element acting like a grid item in CSS grid
  24. Adding text before list
  25. Change cursor type on input type=”file” [duplicate]
  26. problem with and :after with CSS in WebKit
  27. How to set an image’s width and height without stretching it?
  28. HTML class attribute with spaces, it is a W3C valid class?
  29. How to set placeholder value using CSS?
  30. How to add button inside an input [closed]

Leave a Comment