Internet Explorer <=11 does not handle a line height inside pseuso elements using the rem unit well

HTML

<h1>Internet Explorer &lt;=11 does not handle a line height inside pseuso elements using the rem unit well</h1>

<p>The following cubes share the same styles, but IE shows the letter B inside the pseuso element as if the line height was set to 0.</p>
<span class="span1">A</span>

<span class="span2"></span>

<p>On the web:</p>
<ul>
    <li><a href="https://connect.microsoft.com/IE/feedback/details/776744">CSS3: Using 'rem' to set line-height in :before/:after-pseudo elements doesn't work</a>
    </li>
    <li><a href="http://connect.microsoft.com/IE/feedback/details/780274">Using rems for line-height in pseudo element content collapses the line-height in IE 9 and 10</a>
    </li>
    <li><a href="http://www.epinova.no/blog/george-gooding/dates/2013/5/internet-explorer-10-bugs/#comment3475">Internet Explorer, still up to no good</a>
    </li>
</ul>

CSS

html {
    font-size: 62.5%;
    /* Make 2rem behave like 20px, see http://snook.ca/archives/html_and_css/font-size-with-rem */
}
body {
    font: 12px Arial;
    font: 1.2rem Arial;
}
.span1, .span2:before {
    content:'B';
    display: block;
    font-size: 16px;
    font-size: 1rem;
    text-align: center;
    color: white;
    background: red;
    margin: .5em;
    width: 50px;
    width: 5rem;
    height: 50px;
    height: 5rem;
    line-height: 5rem;
}