：之前和之后无法在ie和边缘上工作？

Question

我的页面上有简单的复选框，但是不幸的是，它不能正常工作

这是我的CSS

input[type=checkbox] {
    position: relative;
    cursor: pointer;
    width: 1px;
    height: 1px;
    border: 0;
    margin: -1px;
    clip: rect(0,0,0,0);
}
input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 33px;
    height: 33px;
    top: 0;
    left: 0;
    border: 2px solid #40acdb;
    border-radius: 3px;
    background-color: white;
}
input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 12px;
    height: 40px;
    border: 4px solid #40acdb;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: -14px;
    left: 19px;

}
.input-before:before{
    background-color: rgba(51, 175, 223, 0.39) !important;
}

我尝试了chrome可以正常工作

为什么在边缘上不起作用？