Question

我仅使用标签和输入来模拟CSS的点击效果，但不知道如何在::after伪元素中实现相同的效果而无需在{之外设置input {1}}。我尝试使用flexbox label，但无法正常工作。

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

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;
}

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>

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

1 个答案: