CSS 伪选择器 ::before 和 ::after 不会在 FF 44 和 IE11 中显示

Question

如果“checkbox”和“radio”类型的输入是强制性的，我创建了一些css信息：

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>

不幸的是，它似乎只在 Chrome 中显示，而不在 FF44 和 IE11 中显示

styled checkbox and radio in chrome

css 声明中是否缺少某些东西以在 IE 和 FF 中获得与 Chrome 中相同的视图？

Answer 1

抱歉，伪元素不支持输入。请检查下面的链接，但我不太确定这会对您有所帮助

http://arthurgouveia.com/prettyCheckable/

Answer 2

请记住，虽然输入不能有 :before 和 :after 伪元素，但 LABEL 可以。将您的标签设置为具有等于您输入的名称/ID 的“for”属性，这可能有助于解决一些问题。