Почему IE 11 не рендеринга: после элемента, показывающего css как вычеркнутый в инструментах dev?

Question

У меня есть угловое приложение с двумя значками шрифтов на данном экране. Они отображаются просто в chrome, firefox и edge, но в IE 11 они не отображаются. Значки должны отображаться как content псевдокласс класса :after, который, согласно моим исследованиям, должен отлично работать на IE 9 и выше. Однако, в IE, они просто не отображаются.

Как вы можете видеть на скриншоте,: после того, как элемент не в DOM отображается в Дев инструментов и CSS правильно, но показывает зачеркнуто Дев инструментов:

соответствующие CSS, который составляется и фактически используется в экран, показывающий вопрос, как так:

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

правила выше скрещенных из них не имеют никакого отношения. Но так как кто-то попросил, чтобы увидеть их, вот они:

Вопрос заключается в том: , почему это происходит, и как это исправить?

Answer 1

У меня была аналогичная проблема, элемент after после тега <a> не был показан в IE11, хотя я мог видеть стиль CSS для него. Ответ Фредди here решил проблему для меня. Добавьте это в css display: block;