如何在ASP.NET asp:checkbox控件呈現(xiàn)的HTML控件中定位：在psuedo-element之后？

我看到了適用于一個(gè)簡(jiǎn)單的input-label對(duì)的代碼：

HTML

<input type="checkbox" id="toggle" class="checkbox" />  
<label for="toggle" class="switch"></label>

CSS

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3s;
}
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius:50%;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}

.checkbox:checked + .switch::after {
  left : 20px;
}
.checkbox:checked + .switch {
  background-color: #7983ff;
}
.checkbox {
  display : none;
}

以上工作示例：

https://codepen.io/lawrencelove/pen/xxBWpBj

但不幸的是，當(dāng)使用ASP.NET asp:checkbox控件時(shí)，它會(huì)以不同的方式呈現(xiàn)HTML。

HTML

<span class="checkbox"><input id="toggle" type="checkbox" name="ctl00$ucSiteVersion$toggle" checked="checked">
</span>
<label for="toggle" class="switch"></label>

在這種情況下，因?yàn)?code>input控件嵌套在span標(biāo)記中，這似乎會(huì)導(dǎo)致它不再與組合子選擇器匹配。

上面帶有span標(biāo)簽的破碎示例：

https://codepen.io/lawrencelove/pen/MWxVrxm

我嘗試了相鄰兄弟姐妹和后代的各種組合，但由于包含了結(jié)束標(biāo)記span，我無法很好地發(fā)揮作用。我也試著引用#toggle:checked而不是.checkbox:checked，但這也不起作用。

如何從span標(biāo)記內(nèi)的checkbox控件中瞄準(zhǔn).switch？