Теперь оживим радиокнопки.

Для начала уменьшим закрывающий псевдоэлемент label::after или «закрывашку» до нулевого размера с помощью трансформации scale.

А в активном состоянии будем увеличивать «закрывашку» до нужного размера. Для управления активным состоянием «закрывашки» используем CSS-правило с таким селектором:

input[type="radio"]:checked ~ label::after { ... }

Свойства плавного перехода, как и в предыдущих примерах, добавим в CSS-правило для исходного состояния:

label::after { ... }