Почему установка цвета в CSS до сбоя?

Question

Получил флажок, который работает нормально, но для некоторых браузеров (Edge, iPad, phone) цвет указан на: перед элементом неверно (см. Последнюю строку css):

input[type=checkbox] {
 display: none;
}

input[type=checkbox] + label:before {
    content: "\2714";
    border: 0.1em solid #000;
    display: inline-block;
    border-radius: 0.2em;
    width: 1.5em;
    height: 1.5em;
    padding-left: 0.2em;
    padding-bottom: 0.3em;
    margin-right: 0.2em;
    vertical-align: bottom;
    color: transparent;
}

input[type=checkbox]:checked + label:before {
    background-color: rgb(74,86,46);
    border-color: rgb(74,86,46);
    color: #fff; /* Bad color displayed */
}

<input type="checkbox" id="checkOne"/>
<label for="checkOne">Test</label>

В Edge это не белый, а зеленый. На некоторых (меньших) устройствах он черный. У кого-нибудь есть идея, как это исправить? Спасибо за любую помощь!

Answer 1

: раньше не поддерживается Safari / iOS Safari https://caniuse.com/#search =% 3Abefore

Может быть, здесь вы можете найти свое решение Почему: раньше не видно в сафари?

Answer 2

Я думаю, ::before - это «Псевдоэлемент», и нет класса с именем :before или :after