IE11上覆盖伪元素的基本CSS规则

Question

我有一个basics.scss文件，其中为某些元素定义了一些基本的css规则。 box-sizing: border-box;也有这样的规则：

*,
::before,
::after {
    box-sizing: border-box;
}

在div上，我的css和::before伪元素具有一些特定的::after规则，如下所示：

.a-input__wrapper::before,
.a-input__wrapper::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 8px;
    background-color: #e6e6e6;
    bottom: 0;
    display: block;
}

在所有期望IE11的浏览器上都可以正常工作。在IE11上，基本规则将覆盖.a-input__wrapper伪元素的特定规则。我尝试从基础知识中删除::before和::after并仅使用*，但在IE11上，基本样式仍将其覆盖：

* {
    box-sizing: border-box;
}

我在IE11上制作了一些检查器的屏幕截图，您可以在其中看到变体（带有和不带有伪的基本符号）和特定规则：

带伪造的基本知识：

无伪的基础：

我也发现这篇文章有类似的问题，我在第二个答案中使用display: block;来解决它，但也没有帮助：IE crossing out pseudo element CSS?

希望很清楚。