12

I have an angular app with two font icons in a given screen. These are rendered just fine in chrome, firefox and edge, but on IE 11 they do not display. The icons are to be rendered as the content of the :after pseudo class, which according to my research should work fine on IE 9 and up. However, on IE, these are simply not rendered.

As you can see in the screenshot, the :after element is not in the DOM displayed in the dev tools, and the css is correct but shows crossed out in dev tools:

IE 11 shows css for :after element crossed out, nothing is rendered

The relevant CSS that is compiled and actually used in the screen showing the issue is like so:

.profile-picture[_ngcontent-vem-9]:after {
    font-family: Material Icons;
    content: "\E3B0";
    font-size: 48px;
    top: 32px;
    left: 25px
}
.profile-picture[_ngcontent-vem-9] .title[_ngcontent-vem-9],
.profile-picture[_ngcontent-vem-9]:after {
    display: block;
    position: absolute;
    color: #9e9e9e;
    transition-duration: .3s
}

The rules above the crossed out ones are unrelated. But since someone asked to see them, here they are:

enter image description here

The question is: why is this happening, and how to fix it?

Edy Bourne
  • 5,679
  • 13
  • 53
  • 101
  • Well, what's above those rules in your inspector? it's cut off on the screenshot – Huangism Feb 06 '17 at 21:23
  • Have you tried `font-family: "Material Icons"`? It's very strange name for font. Also I have seen that even if `:after` element is shown correctly IE still crosses out it's rules as it was overwritten by some other rule (usually it shows element itself rules as applied ones). – Justinas Feb 06 '17 at 21:26
  • @Justinas Even if it is a strange name for a font, omitting the quotes is not an error, and if the font can't be used, nothing bad will happen. So that's not the problem; something else is going on in the OP's situation. – Mr Lister Feb 06 '17 at 21:37
  • @MrLister Well, since icons are shipped as font, than `font can't be used` *will* make icons to disappear. – Justinas Feb 06 '17 at 21:43
  • Have you tried using Material Icons as described in this resource: https://google.github.io/material-design-icons/ ? – Justinas Feb 06 '17 at 21:46
  • @Huangism the rules above are unrelated, nothing is overriding the crossed out rules there... – Edy Bourne Feb 06 '17 at 21:54
  • @Justinas Yeah that was my thought, the quotes were removed by a css compressor.. but adding them back did not make a difference. Also the rules above are unrelated, nothing is overriding the crossed out rules. It's a mystery! I did try using as they suggest, same results... I have stepped away from it because I don't want all those class declarations, but anyways they didn't help, same thing. – Edy Bourne Feb 06 '17 at 21:55
  • @EdyBourne Can you provide SO Snippet with your issue so that we can play around? Maybe it's as simple as wrong `content` code? – Justinas Feb 07 '17 at 06:42
  • The problem probably lies in the font not being rendered, not the element, as described [here](https://stackoverflow.com/a/27879892/1744461) – br4nnigan Feb 21 '18 at 16:20
  • Does this answer your question? [IE crossing out pseudo element CSS?](https://stackoverflow.com/questions/27875232/ie-crossing-out-pseudo-element-css) – pishpish Apr 25 '20 at 11:51

1 Answers1

8

I had a similar issue, the after element on an <a> tag wasn't rendered in IE11, though I could see the CSS style for it. Freddie's answer here solved the issue for me. Add this to the css display: block;

THawkins
  • 89
  • 1
  • 4