Vorher und nachher Pseudoelemente auf IE und Edge

Question

Ich arbeite an dieser Seite: link to page.
Inside Ich habe before und after Elemente. In IE sind sie zu groß, Originalbreite und -höhe funktionieren diese Bilder nicht. Wenn ich versuche, dieses Problem zu lösen, wird in FF und Chrome alles noch schlimmer.
In Edge Dinge sind ein bisschen anders - ich habe einen Weg gefunden, um Bilder kleiner zu machen, aber before Element ist im Inneren h2 Text.
Hier sind die Beispiele:

Normal (aus FF und Chrome)

Ein wenig seltsam (von Rand)

So verrückt (von 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; 
    } 
} 

Answer 1

Wie @ankit sagt, entfernen width: 80% ist richtig auf IE. Auch Entfernen von Teil mit supports Problem mit Edge behoben.

Answer 2

Versuchen Sie, die Position von vor und nach ganz links und ganz rechts zu machen. Wenn es nicht funktioniert, versuche Pixel zu% zu machen.

Answer 3

Ein anderer Ansatz (vorausgesetzt, Sie die Kontrolle über die HTML haben): ein leeres direkt nach dem Eingang hinzufügen, und dass die Eingabe + Spanne in CSS Ziel mit: nach

.field_with_errors { 
    display: inline; 
    color: red; 
} 
.field_with_errors input+span:after { 
    content: "*" 
} 
<div class="field_with_errors">Label:</div> 
<div class="field_with_errors"> 
    <input type="text" /><span></span> 
</div> 

ich in AngularJS diesen Ansatz bin mit, weil Es fügt automatisch .ng-invalid-Klassen hinzu, um Elemente und das Formular zu erstellen, nicht jedoch das.