Why isn't IE 11 rendering: after an element, showing css as strikethrough in dev tools?

Question

I have an angular app with two font icons on this screen. They are displayed simply in chrome, firefox and edge, but in IE 11 they are not displayed. Icons should be displayed as a contentpseudo-class :after, which, according to my research, should work fine on IE 9 and above. However, in IE, they simply do not appear.

As you can see in the screenshot, the: after element is not in the DOM displayed in dev tools, but css is correct, but shows what is crossed out in dev tools:

The relevant CSS that is compiled and actually used on the screen showing the problem is as follows:

.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 . Freddie . css display: block;