元素未显示后的伪

Question

我正在尝试添加::之前和::之后的伪元素复选框，但是当我们检查复选框项时元素未显示后的psudo

跟随css和html我使用了

＆＃13;

＆＃13;

.multiselect-container li input {
  opacity: 0;
  position: relative !important;
  left: -4px;
  top: 2px;
  z-index: 999;
}
.multiselect-container li {
  position: relative;
}
.multiselect-container li label {
  padding: 4px 20px 3px 40px !important;
}
.multiselect-container li span::before {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  position: absolute;
  content: '';
  left: 12px;
  top: 5px;
}
.multiselect-container li span::after {
  width: 18px;
  height: 18px;
  background: #093c73 url(../images/tick.png) no-repeat 2px 2px;
  position: absolute;
  content: '';
  left: 13px;
  top: 6px;
  display: none;
}
.multiselect-container li input[type="checkbox"]:checked + .multiselect-container li span::after {
  display: block;
}

＆＃13;

<ul class="multiselect-container">
  <li>
    <label class="checkbox">
      <input type="checkbox" value="option1">Option1</label>
    <span></span>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

仔细检查CSS中的选择器与HTML的结构。 你不能像在CSS中输入选择器那样做选择器。

跨度需要直接在输入后复选：复选框，而不是在标签之后。

.multiselect-container li input {
  opacity: 0;
  position: relative !important;
  left: -4px;
  top: 2px;
  z-index: 999;
}

.multiselect-container li {
  position: relative;
}

.multiselect-container li label {
  padding: 4px 20px 3px 40px !important;
}

.multiselect-container li span::before {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  position: absolute;
  content: '';
  left: 12px;
  top: 5px;
}

.multiselect-container li span::after {
  width: 18px;
  height: 18px;
  background: #093c73 url(../images/tick.png) no-repeat 2px 2px;
  position: absolute;
  content: '';
  left: 13px;
  top: 6px;
  display: none;
}

.multiselect-container li input[type="checkbox"]:checked + span::after {
  display: block;
}

<ul class="multiselect-container">
  <li>
    <label class="checkbox">
      <input type="checkbox" value="option1">Option1
      <span></span>
    </label>
  </li>
</ul>