Before and after pseudo elements on IE and Edge

Question

I am working on this page: link to page.
Inside h2 I have before and after 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.
In Edge things are a little bit different - I have figured out a way to make images smaller, but before element is inside h2 text.
Here are the examples:

Normal (from FF and Chrome)

A little strange (from Edge)

So crazy (from IE)


CSS 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;
    }
}

Solution

As @ankit says, removing width: 80% is doing right on IE. Also removing part with supports resolved problem with Edge.