css - Internet Explorer 10 の :before および :after に関する問題

Question

これは基本的に、次のように h1 要素の前後に 2 つの行を追加します。この行は、高さ 1px の単なる背景色です。

------------------------ テキスト ------------------------

これを Chrome と Firefox でテストしたところ、すべて正常に動作しましたが、Internet Explorer 10 でテストすると、左の行が表示されません。

.ItemHeader div h1 {
    position:relative;
    overflow:hidden;
    z-index: 1;
    text-align: center;
    font-weight:bold;
    font-size: 0.8em;
}
.ItemHeader div h1:before, .ItemHeader div h1:after {
    top: 50%;
    overflow:hidden;
    height: 1px;
    content:"\a0";
    background-color:#a2a2a2;
    position: absolute;
    width:50%;
}
.ItemHeader div h1:before {
    margin-left:-51%;
    text-align: right;
}
.ItemHeader div h1:after {
    margin-left:1%;
}

<div class="item-block">
    <div class="ItemHeader">
        <div>
            <h1>Application</h1>
        </div>
    </div>
</div>

JSFiddle をチェックアウトする