Internet Explorer is hiding my display:table-cell content

Question

I'm trying to display an icon vertically centered and to the far right inside a container. I have some code that works using ::after and table-cell. However, in IE, the content doesn't display at all. If I remove the display:table-cell the content is visible, but the alignment is off.

.tableWrap
{
    display: table;
    table-layout: fixed;
    width: 100%;
}

.tappable::after
{
    font-family: FontAwesome;
    display:table-cell;
    content: "\f054";    
    vertical-align: middle;
    width: 20px;
    font-size: 10px;
    color:red;        
}

.wrapper
{
    display:table-cell;
    vertical-align: middle;
}

    <div class="tappable tableWrap">
        <div class="wrapper">
            This approach works everywhere but in IE
        </div>
    </div>

JSFiddle with HTML/CSS examples

In addition to what is shown in the JSFiddle, I've tried applying overflow:visible to a variety of elements, to no avail (I saw a few other IE issues where this was a fix). I'd like to find a way to fix my existing implementation or a new approach to accomplish the same thing. The containers can be of varying heights so a static offset won't work.

Answer 1

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.

Example

This isn't a preferred solution, but it is a solution.

Answer 2

This will work in every browser. I moved the :after to the wrapper instead along with many other styles. Since the font-awesome item is almost more aligned to the top (just the way it is made), it will always have to have a little margin applied to the top of it to slightly bring it down. This is just how its made.

Updated CSS:

.tableWrap
{
    display: table;
    table-layout: fixed;
    width: 100%;
    vertical-align: middle;
}


.wrapper
{
    width:100%;
    vertical-align: middle;
    float:left;
}

.wrapper:after
{
    margin-top:5px;
    font-family: FontAwesome;
    content: "\f054";    
    vertical-align: middle;
    width: 20px;
    font-size: 14px;
    color:red; 
    float:right;
}

.jsFiddleDisplay
{
    margin-top:10px; 
    border:1px solid; 
    padding:30px 0px;
}

WORKING DEMO