Html 为什么 IE 11 不呈现 :after 元素，在开发工具中将 css 显示为划掉？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42076744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is IE 11 not rendering :after element, showing css as crossed out in dev tools?
提问by Edy Bourne
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 contentof the :afterpseudo class, which according to my research should work fine on IE 9 and up. However, on IE, these are simply not rendered.
我在给定的屏幕中有一个带有两个字体图标的 angular 应用程序。这些在 chrome、firefox 和 edge 中渲染得很好，但在 IE 11 上它们不显示。该图标将被呈现为content的的:after伪类，而根据我的研究，应该工作在IE 9和罚款。但是，在 IE 上，这些根本不会呈现。
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:
正如您在屏幕截图中看到的，:after 元素不在开发工具中显示的 DOM 中，并且 css 是正确的，但在开发工具中显示为划掉：
The relevant CSS that is compiled and actually used in the screen showing the issue is like so:
在显示问题的屏幕中编译并实际使用的相关 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
}
The rules above the crossed out ones are unrelated. But since someone asked to see them, here they are:
划掉的规则上面的规则是不相关的。但既然有人要求见他们，他们就在这里：
The question is: why is this happening, and how to fix it?
问题是：为什么会发生这种情况，以及如何解决？
