伪元素在Firefox和IE上无法正常工作

Question

据我所知，新技术在最新的Firefox和IE上都得到了很好的支持。但在这种情况下，我不明白为什么这些伪元素无法在两个浏览器上正确显示。当然，Chrome上的一切都还可以。非常感谢你的帮助！

现场演示： http://codepen.io/victorcruzte/pen/grWjmy

HTML

<button type="button" class="btn-disconnect" cmd-disconnect="facebook">Disconnect</button>

CSS

.btn-disconnect {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 7.69231em;
    color: white;
    font-size: .92857em;
    background-color: #6b6c72;
    text-align: center;
    border-radius: 3px;
}
.btn-disconnect:before {
    content: "";
    display: inline-block;
    width: 1.14286em;
    height: 3px;
    background-color: white;
    vertical-align: middle;
    margin-right: .42857em;
}

.btn-disconnect:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

这些是截图：

如您所见，在Chrome版本中，减号位于文本旁边。但是在firefox版本中，减号被推到了按钮的顶部。