Before and after pseudo elements on IE and Edge
<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>