title: Before and after pseudo elements on IE and Edge
body: <p><br>
  I am working on this page: <a href="http://montowniasmakuizdrowia.pl/" rel="nofollow noreferrer">link to page</a>.<br>
  Inside <code>h2</code> I have <code>before</code> and <code>after</code> elements. In IE they are too big, original width and height these images are not working. When I am trying to resolve this problem, in FF and Chrome everything is getting even worse.<br>
  In Edge things are a little bit different - I have figured out a way to make images smaller, but <code>before</code> element is inside <code>h2</code> text.<br>
  Here are the examples:<br><br>
  Normal (from FF and Chrome)<br><a href="https://i.stack.imgur.com/0DetV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0DetV.png" alt="normal view"></a><br>
  A little strange (from Edge)<br><a href="https://i.stack.imgur.com/XN573.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XN573.png" alt="strange view"></a><br>
  So crazy (from IE)<br><a href="https://i.stack.imgur.com/Gy0wG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gy0wG.png" alt="karuzela śmiechu"></a>
  <br><br>
  CSS code:</p>
  
  <pre><code>h2{/*How I am displaying h2 elem */
      text-align: center;
      width: 80%;
      margin: 45px auto 115px !important;
      text-transform: uppercase;
      color: #fff;
  }
  h2::before {
      content: url(img/pepper.svg);
      margin-right: 10px;
      position: relative;
      height: 50px;
  }
  h2::after{
      content: url(img/apple.svg);    
      margin-left: 10px;
      position: relative;
      height: 50px;
  }
  @supports (-ms-accelerator:true) { /*Trying to resolve problem in Edge */
      h2::before {
          position: absolute;
      }
      h2::after{
          position: absolute;
      }
  }
  </code></pre>