checkbox styling dont work in IE

I'm making a form where accordians hide multiply checkbox, and so far so good!

Then, the styling where I use the lable to make my own style of checkmarks. Works fine!

However, when it comes to IE, it just doesn't work :( Can someone tell me why?

---

Note :

Its not me who wrote all the code, I've just have to make the checkbox work, and leave the the rest as it is.

---

My code :

.specialCheck2 font {
    font-size: 15px;
    font-family: "Verdana";
}

.specialCheck2 {
        position: relative;
}

.specialCheck2 label {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 2px;
    left: 0;
    background: #fff;
    border: 1px solid #757575;
    font-size: 79%;
}

.specialCheck2 label:after {
    opacity: 0;
    content: 'x';
    position: absolute;
    color: #00035a;
    background: #00035a;
    width: 75%;
    height: 75%;
    text-align: center;
    font-size: 1;
    line-height: 10px;
    margin: 14%;
}

.specialCheck2 label:hover::after {
        opacity: 0.5;
}

.specialCheck2 input[type=checkbox]:checked + label::after {
        opacity: 1;
}

.specialCheck2 input[type=checkbox] {
        margin: 0 5px 0 4px;
}

<div class="specialCheck2">
     <font>
         <input type="checkbox" name="Tilmelding" id="newsletterCheckbox2">JA TAK! Send mig kursuskatalog og kalender                                             
         <label for="newsletterCheckbox2"></label>
     </font>
</div>