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）：在输入后添加一个空白，然后使用 input+ span:after

在 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 类添加到表单元素和表单中，但不会添加到 .

IE 和 Edge 上的伪元素前后

Before and after pseudo elements on IE and Edge

html

css

internet-explorer

microsoft-edge