html - 添加标签 :after after input element

Question

我制作自定义单选复选框这是我的代码:

HTML:

.radio-custom input[type="radio"]:checked + label:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 10.5px;
  margin-top: -5px;
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  width: 10px;
  height: 10px;
  background-color: #117efd;
  border-radius: 50px;
}

<div class="radio-custom">
     <input type="radio" name="test" id="test" value="test" />
     <label>Test</label>
</div>

如果我在<input type="radio" name="test" id="test" value="test" />之后添加任何元素的问题label:after不会得到可以做些什么来解决这个问题？

Answer 1

将 + 更改为 ~ 即可。

您的选择器不起作用的原因是您使用的是 +，它是相邻选择器或下一个同级选择器。将其更改为通用兄弟选择器 ~ 将匹配第二个元素，前提是第二个元素位于第一个元素之前并且两者具有相同的父元素。

.radio-custom input[type="radio"]:checked ~ label:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 10.5px;
  margin-top: -5px;
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  width: 10px;
  height: 10px;
  background-color: #117efd;
  border-radius: 50px;
}

<div class="radio-custom">
  <input type="radio" name="test" id="test" value="test" />
  <span></span>
  <label>Test</label>
</div>