我可以在带有输入的标签中选择 ::after 吗?

Question

我只用标签和输入的 CSS 模拟点击效果，但不知道如何在::after伪元素中具有相同的效果，而无需在label之外设置input。我尝试使用弹性框order但它不起作用。

如果您运行下面的示例，您将看到缺少黄色背景的数字。点击检查。如何解决此问题？可能吗？

body {
counter-reset: step;
}
label {
display: flex;
}
input[type=radio] {
display: none;
}
label::after {
counter-increment: step;
content: counter(step);
margin-right: 10px;
}
span {
order: 2
}
label input:checked ~ * {
background: yellow;
}

<label><input type="radio" name="step" checked><span>Hello</span></label>
<label><input type="radio" name="step"><span>Kiss</span></label>
<label><input type="radio" name="step"><span>Bye</span></label>

Answer 1

改为在范围内移动计数器：

body {
counter-reset: step;
}
label {
display: flex;
}
input[type=radio] {
display: none;
}
label {
counter-increment: step;
}
label span::before  {
content: counter(step);
margin-right: 10px;
} 
label input:checked ~ * {
background: yellow;
}

<label><input type="radio" name="step" checked><span>Hello</span></label>
<label><input type="radio" name="step"><span>Kiss</span></label>
<label><input type="radio" name="step"><span>Bye</span></label>