Problems with :before and :after in Internet Explorer 10

Question

This basically adds two lines before and after the h1 element, like this: The line is just a background color with a height of 1px.

------------------------ Some Text ------------------------

I tested this in Chrome and Firefox and everything works properly but when I test it in Internet Explorer 10 the LEFT line is not displayed.

.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>

Checkout the JSFiddle

Answer 1

Here is your solution:

.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 {
    left:-5%;
    text-align: right;
}
.ItemHeader div h1:after {
    left:55%;
}

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

Remove the margin-left properties in your code and use left instead.

It's working fine in both Chrome and IE10.

JSFiddle: http://jsfiddle.net/4KX3u/7/