Пользовательский переключатель не может центрировать псевдоэлемент ⇐ CSS

[Anonymous]

Я пытаюсь создать собственный переключатель, но после нескольких попыток центрирования мне не удалось центрировать псевдоэлемент. Для некоторых размеров экрана это работает нормально, но иногда это становится странным.

[img]https://i.sstatic. net/v9LeH.png[/img]



< pre class="snippet-code-css lang-css" Prettyprint-override">

Код: Выделить всё

.custom-radio {
display: none;
}

.custom-radio+label {
position: relative;
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 50%;
}

.custom-radio+label:after {
content: "";
position: absolute;
width: 11px;
height: 11px;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background: black;
border-radius: 50%;
}

.custom-radio.flex+label {
display: flex;
align-items: center;
justify-content: center;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/493 ... do-element