¿Por qué IE 11 no se está procesando: después del elemento, mostrando css como tachado en las herramientas de desarrollo?

Tengo una aplicación angular con dos icons de fuente en una pantalla determinada. Estos se representan perfectamente en Chrome, Firefox y Edge, pero en IE 11 no se muestran. Los íconos se deben representar como el content de :after pseudoclase, que según mi investigación debería funcionar bien en IE 9 y posteriores. Sin embargo, en IE, estos simplemente no se representan.

Como puede ver en la captura de pantalla, el elemento: after no está en el DOM que se muestra en las herramientas de desarrollo, y el css es correcto, pero aparece tachado en las herramientas de desarrollo:

IE 11 muestra css para: después del elemento tachado, no se representa nada

El CSS relevante que se comstack y se usa realmente en la pantalla que muestra el problema es así:

 .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 } 

Las reglas sobre las tachadas no están relacionadas. Pero como alguien pidió verlos, aquí están:

enter image description here

La pregunta es: ¿por qué sucede esto y cómo solucionarlo?

Tuve un problema similar, el elemento posterior en una etiqueta no se procesó en IE11, aunque pude ver el estilo CSS para él. La respuesta de Freddie aquí resolvió el problema para mí. Agregue esto a la display: block; css display: block;