Why is IE 11 not rendering :after element, showing css as crossed out in dev tools?

问题

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 content of the :after pseudo class, which according to my research should work fine on IE 9 and up. However, on IE, these are simply not rendered.

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:

The relevant CSS that is compiled and actually used in the screen showing the issue is like so:

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

回答1:

I had a similar issue, the after element on an <a> tag wasn't rendered in IE11, though I could see the CSS style for it. Freddie's answer here solved the issue for me. Add this to the css display: block;

回答2:

I know this post is old but if anyone is having this issue and is using CSS Variables it seems to be an issue in IE and Edge where CSS variables break the entire pseudo element - changing to hexidecimal colours solved the issue for me.

来源：https://stackoverflow.com/questions/42076744/why-is-ie-11-not-rendering-after-element-showing-css-as-crossed-out-in-dev-too