title: Pseudo-elements :before & :after not working in IE 10 or 11
body: <p>In Edge, Google Chrome and Firefox the code works fine but in IE it will only show the after and not the before either side of my heading 2 tag. </p>
  
  <p><h2>Clear achievable strategy</h2></p>
  
  <pre><code>h2 { color: #333333; font-family: 'Lato', sans-serif; position: relative;
      font-size: 30px; padding: 0 10px 0 10px;
      z-index: 1;
      overflow: hidden;
      text-align: center;}
  
  h2:before, h2:after { position: absolute;
      top: 51%; 
      overflow: hidden;
      width: 18%;
      height: 1px;
      content: '\a0';
      background-color: #333333; }
  h2:before {
      margin-left: -20%;
      text-align: right;
  }
  h2:after {
      margin-left: 2%;
      text-align: right;
  }
  </code></pre>