CSS pseudo selectors ::before and ::after will not

Question

To style inputs of type "checkbox" and "radio" if they are mandatory I created some css information:

input[type=checkbox].is-mandatory::before {
    position: absolute;
    left: -5px;
    top: -5px;
    border: solid 1px #A94442;
	border-radius: 4px;
    width: 22px;
    height: 22px;
    content: "";
}

input[type=checkbox].is-mandatory::after {
    position: absolute;
    left: -4px;
    top: -4px;
    border: solid 4px #F2DEDE;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    content: "";
}

<div class="checkbox">
    <label>
        <input class="is-mandatory" type="checkbox" id="chk0" name="chk0" value="0">
        A simple checkbox (mandatory)
    </label>
</div>

<div class="radio">
    <label>
        <input class="is-mandatory" type="radio" id="chk1" name="chk1" value="1">
        A radio (mandatory)
    </label>
</div>

Unfortunately it seems only displayed in Chrome and not in FF44 and IE11

styled checkbox and radio in chrome

Is there someting missing in css declaration to get the same view in IE and FF like in Chrome?

Answer 1

Keep in mind that while an input can't have a :before and :after pseudo-element, the LABEL can. Set your label to have a "for" attribute that's equal to the name/id of your input, and it might help solve some issues.

Answer 2

Sorry but Pseudo elements doesn't support on input. Please check the link below but i am not pretty sure that this is gonna help you

http://arthurgouveia.com/prettyCheckable/