IE 11为什么不渲染：after元素，显示在开发工具中划掉的CSS？

Question

我在给定的屏幕上有一个带有两个字体图标的角度应用程序。这些在chrome，firefox和edge上都可以很好地呈现，但是在IE 11上却不显示。该图标将被呈现为content的的:after伪类，而根据我的研究，应该工作在IE 9和罚款。但是，在IE上，这些根本不呈现。

如屏幕截图所示，：after元素不在开发工具中显示的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

我有一个类似的问题，<a>尽管我可以看到CSS样式，但是标记中的after元素并未在IE11中呈现。弗雷迪（Freddie）在这里的回答为我解决了这个问题。将此添加到CSSdisplay: block;