IE和Edge上的伪元素之前和之后

Question

我正在撰写此页：link to page。
在h2内，我有before和after元素。在IE中它们太大，原始宽度和高度这些图像不起作用。当我试图解决这个问题时，在FF和Chrome中，一切都变得更糟 在Edge中，事情有点不同 - 我找到了一种使图像更小的方法，但before元素在h2文本内。
以下是例子：

正常（来自FF和Chrome）

有点奇怪（来自Edge）

太疯狂了（来自IE）

CSS代码：

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

尝试在最左边和最右边之前和之后做出位置。 如果它不起作用，请尝试将像素设为％。

Answer 2

正如@ankit所说，删除width: 80%在IE上正确。同时删除部分supports解决了Edge问题。

Answer 3

另一种方法（假设您可以控制HTML）：在输入后添加一个空的右侧，并使用输入+ span在CSS中定位：

.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>

我在AngularJS中使用这种方法，因为它会自动添加.ng-invalid类来形成元素和表单，但不会添加。