I'm trying to create a clickable effect using CSS only with labels and inputs. However, I am struggling to replicate the same effect on my ::after pseudo-element without moving the input outside of the label. I attempted using flexbox order property but it did not work.
If you run the code snippet below, you will notice that the number with a yellow background is missing. Try clicking on it. How can I resolve this issue? Is there a possible solution?
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>