Html 我可以在带有输入的标签中选择：：after吗？

我正在用CSS模拟一个点击效果，只使用标签和输入，但不知道如何在

伪元素之后，在
标签之外设置
输入
时，产生相同的效果。我尝试使用flexbox
order
，但它不起作用

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


正文{
计数器复位：步骤；
}
标签{
显示器：flex；
}
输入[类型=收音机]{
显示：无；
}
标签：：之后{
反增量：步进；
内容：计数器（步骤）；
右边距：10px；
}
跨度{
订单：2
}
标签输入：选中~*{
背景：黄色；
}
你好
吻
再见
将计数器移到量程内：


正文{
计数器复位：步骤；
}
标签{
显示器：flex；
}
输入[类型=收音机]{
显示：无；
}
标签{
反增量：步进；
}
标签span:：before{
内容：计数器（步骤）；
右边距：10px；
} 
标签输入：选中~*{
背景：黄色；
}
你好
吻
再见
Awesome@Temani Afif，使用
标签中的
计数器增量：步骤
，但不可能再在弯曲方向
弯曲方向：列之间进行更改。我应该再问一个问题吗？@JohnnyJohnny只需制作span
inline flex
或
flex
并改变内部方向您是一个天才、简单而简单的解决方案，非常感谢@Termani Afif！