IE CSS ::在伪元素问题之后

Question

我在使用:: after伪元素在IE中正常运行时遇到了一些问题，即使在IE 11中也是如此。以下是正在发生的事情的屏幕截图：。

以下是我正在使用的平台生成的HTML标记：

<div id="ball_iTFXLJGhNGkSyZz7wC7TqMQ" class="ixp-grid-row ixp-container">
    <div id="ball_iIOjpOAQRhkOs4ZMQgPuAEA" class="ixp-grid-col-xs-4 form-navstep-container ixp-container">
        <div id="ball_iFrNaRsKeUCjzJGK9yG3MA" style="float:right;" class="form-navstep-circle active ixp-text">
            <div>1</div>
        </div>
    </div>
    <div id="ball_iHGz8UVJgs0uxaJNLiTwPw" class="ixp-grid-col-xs-4 form-navstep-container ixp-container">
        <div id="ball_ijKJG8GfEykmaCLAbiVidA" style="margin: 0 auto;" class="form-navstep-circle ixp-text">
            <div>2</div>
        </div>
    </div>
    <div id="ball_iNfAak0kgakCYT7Mz4WTuA" class="ixp-grid-col-xs-4 form-navstep-container ixp-container">
        <div id="ball_iHRb3RfKneESxoPOMJXKjmg" class="form-navstep-circle ixp-text">
            <div>3</div>
        </div>
    </div>
 </div>

这是我的CSS：

.form-navstep-container:not(:last-child) .form-navstep-circle:after {
    content: "";
    position: absolute;
    top: 16px;
    height: 5px;
    border-top: 1px solid #fff;
    width: 50%;
    margin-left: 15px;
}
.form-navstep-circle {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    font-size: 16px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    border: 1px solid #fff;
}
.form-navstep-circle.active {
    background: #fff;
    color: #000; /* For IE 9 and below */
    color: rgba(0, 0, 0, 0.5);
}

这会在编号步骤后绘制白线。旧版本的Opera，Chrome以及IE当然也会出现同样的问题。 Firefox设法将这一直处理回5.0。我想也许这是一个盒子大小的问题，但尽管尝试了这个问题，这个问题还没有在IE中得到解决。我也尝试使用IE特定的样式表，但由于我用来创建登录页面的平台有限，我无法加载在平台加载之前对框架没有意义的外部样式表。我认为这个问题相对容易修复，但我似乎在消隐。如果有人能帮助我，那就太好了。

以下是登台网站的链接：http://info.nlcloans.com/general-public-version-one。