CSS ::before, ::after selectors not applied in IE10

Question

Why would all rules within a ::before, ::after rule be ignored by IE10?

Looking at dev tools, every rule within those selectors have a line through them and are not being applied.

Has anyone seen this before?

Open this is Chrome/Safari and you will see it works. In IE10+/FF, it shows nothing.

http://codepen.io/anon/pen/qEpmKr

<input name="sex" class="sex_m" type="radio" value="Male">

input.sex_m[type="radio"]:after {
  content: "Male";
  padding: 9px 23px;
}
input[type="radio"]:checked:after {
  color: #222;
  border-left: medium none;
}
input[type="radio"]:after {
    border-left: medium none;
    font-size: 12px;
    vertical-align: top;
    color: #989898;
    padding: 9px 20px;
}
input.sex_m[type="radio"]:before {
    content: "M";
}
input[type="radio"]:checked:before {
    background-color: #F68B1F;
}
input[type="radio"]:checked:before,  input[type="radio"]:checked:after {
    border: 2px solid #F68B1F;
}
input[type="radio"]:before {
    font-family: FontAwesome;
    color: #FFF;
    font-size: 28px;
    background-color: #DEDEDE;
    padding: 9px 10px;
}
input[type="radio"]:before, input[type="radio"]:after {
    display: inline-block;
    border: 2px solid #DEDEDE;
    line-height: 20px;
    visibility: visible;
    height: 45px;
}
input[type="radio"] {
    width: 150px;
    height: 45px;
    visibility: hidden;
}