如何用CSS为除最后一个外的所有label设置::after伪元素？

问题说明 #

尝试给除最后一个<label>外的所有标签添加::after伪元素，但现有CSS选择器不生效，相关代码如下：

原CSS代码 #

.switches-container {
  width: 8rem;
  position: relative;
  display: flex;
}

.switches-container input {
  visibility: hidden;
  position: absolute;
  top: 0;
}

.switches-container label {
  width: 50%;
  margin: 0;
  text-align: center;
  cursor: pointer;
  color: rgb(0, 0, 0);
}

.switches-container label:not(:last-child)::after {
  content: "";
  position: absolute;
  width: 15px;
  background: red;
  height: 2px;
  top: 7px;
  margin-left: 7px;
}

.switch-wrapper {
  position: absolute;
  top: -1.5px;
  bottom: 0;
  left: 45px;
  border: 1.5px solid black;
  border-radius: 50%;
  width: 19px;
  height: 19px;
  z-index: 3;
  transition: transform .5s cubic-bezier(.77, 0, .175, 1);
}

.switches-container input:nth-of-type(1):checked~.switch-wrapper {
  transform: translateX(-174%);
}

.switches-container input:nth-of-type(2):checked~.switch-wrapper {
  transform: translateX(50%);
}

.switches-container input:nth-of-type(3):checked~.switch-wrapper {
  transform: translateX(277%);
}

原HTML代码 #

<div class="container" style="margin-right: -10px;">
  <div class="switches-container">
    <input type="radio" id="ftwo" name="switchPlan" value="2" />
    <input type="radio" id="fthree" name="switchPlan" value="3" checked="checked" />
    <input type="radio" id="ffour" name="switchPlan" value="4" />

    <label for="ftwo">2</label>
    <label for="fthree">3</label>
    <label for="ffour">4</label>

    <div class="switch-wrapper"></div>
  </div>
</div>

问题原因 #

:last-child选择器匹配的是父元素的最后一个子元素，而.switches-container的最后一个子元素是<div class="switch-wrapper">，并非最后一个<label>。因此label:not(:last-child)会选中所有label（没有任何一个label是父元素的最后一个子元素），导致所有label都被加上伪元素，不符合预期。

解决方案 #

将选择器改为label:not(:last-of-type)，:last-of-type会匹配父元素中同类型（<label>）的最后一个元素，这样就能精准排除最后一个label：

修改后的关键CSS代码 #

.switches-container label:not(:last-of-type)::after {
  content: "";
  position: absolute;
  width: 15px;
  background: red;
  height: 2px;
  top: 7px;
  margin-left: 7px;
}

另外，建议调整label的宽度：当前设置width:50%但存在3个label，flex布局下会超出容器，改成flex:1可让三个label均分容器宽度，更合理：

.switches-container label {
  flex: 1; /* 替换width:50% */
  margin: 0;
  text-align: center;
  cursor: pointer;
  color: rgb(0, 0, 0);
}

完整修改后的CSS代码 #

.switches-container {
  width: 8rem;
  position: relative;
  display: flex;
}

.switches-container input {
  visibility: hidden;
  position: absolute;
  top: 0;
}

.switches-container label {
  flex: 1;
  margin: 0;
  text-align: center;
  cursor: pointer;
  color: rgb(0, 0, 0);
}

.switches-container label:not(:last-of-type)::after {
  content: "";
  position: absolute;
  width: 15px;
  background: red;
  height: 2px;
  top: 7px;
  margin-left: 7px;
}

.switch-wrapper {
  position: absolute;
  top: -1.5px;
  bottom: 0;
  left: 45px;
  border: 1.5px solid black;
  border-radius: 50%;
  width: 19px;
  height: 19px;
  z-index: 3;
  transition: transform .5s cubic-bezier(.77, 0, .175, 1);
}

.switches-container input:nth-of-type(1):checked~.switch-wrapper {
  transform: translateX(-174%);
}

.switches-container input:nth-of-type(2):checked~.switch-wrapper {
  transform: translateX(50%);
}

.switches-container input:nth-of-type(3):checked~.switch-wrapper {
  transform: translateX(277%);
}

内容的提问来源于stack exchange，提问作者Thor The dog