title: Problems with :before and :after in Internet Explorer 10
body: <p>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.</p>
  
  <p>------------------------ Some Text ------------------------</p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="item-block"&gt;
      &lt;div class="ItemHeader"&gt;
          &lt;div&gt;
              &lt;h1&gt;Application&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Checkout the <a href="http://jsfiddle.net/4KX3u/1/" rel="nofollow">JSFiddle</a></p>