There seems to be an issue with IE and some layout CSS in the pseudo elements. The only way it seems to work is to place the element in the DOM with the layout properties (display, width, etc.). If you put them in the ::after CSS it doesn't display properly.
.table
{
display:table;
table-layout: fixed;
width: 100%;
border:1px solid;
}
.cell
{
display:table-cell;
}
.icon
{
display: table-cell;
vertical-align: middle;
width: 20px;
}
.icon::after
{
font-family:FontAwesome;
content:"\f054";
font-style:normal;
font-size: 14px;
color:magenta;
}
<div class="table">
<div class="cell">Some text</div>
<div class="icon"></div>
</div>
Interestingly, if you put it all in the after tag, it seems to make room for the content, it just doesn't display the content. Meaning, with a lot of text in the "cell" class div, you can see that it has made room for the ::after element, it just doesn't display the content.
This isn't a preferred solution, but it is a solution.