title: Why is IE 11 not rendering :after element, showing css as crossed out in dev tools?
body: <p>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 <code>content</code> of the <code>:after</code> pseudo class, which according to my research should work fine on IE 9 and up. However, on IE, these are simply not rendered.</p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/TphfA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TphfA.png" alt="IE 11 shows css for :after element crossed out, nothing is rendered"></a></p>
  
  <p>The relevant CSS that is compiled and actually used in the screen showing the issue is like so:</p>
  
  <pre><code>.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
  }
  </code></pre>
  
  <p>The rules above the crossed out ones are unrelated. But since someone asked to see them, here they are:</p>
  
  <p><a href="https://i.stack.imgur.com/aiUx6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aiUx6.png" alt="enter image description here"></a></p>
  
  <p>The question is: <strong>why is this happening, and how to fix it?</strong></p>