IE 11が：after要素をレンダリングせず、開発ツールで取り消し線が引かれたCSSを表示するのはなぜですか？

Question

私はangularアプリを2つのフォントアイコンで特定の画面に表示しています。これらはChrome、Firefox、およびEdgeで正常にレンダリングされますが、IE 11ではアイコンは表示されません。アイコンは:after疑似クラスのcontentとしてレンダリングされます。私の調査によると、これは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>タグのafter要素がIE11でレンダリングされませんでしたが、CSSスタイルは表示されました。フレディの答え ここ は私のために問題を解決しました。これをcssに追加しますdisplay: block;