Могу ли я выбрать :: after внутри метки с вводом?

Question

Я имитирую эффект щелчка с помощью CSS только с метками и входами, но не знаю, как я могу добиться того же эффекта в моем псевдоэлементе ::after без установки input вне label . Я пробовал использовать flexbox 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>