Why is the image not displayed when clicking on the checkbox?

Question

css

checkbox must be nested in label

codepen

.rich-checkbox-buttons__item.js-rich-checkbox-buttons__item(tabindex = "0")

  label.rich-checkbox-buttons__text.js-rich-checkbox-buttons__text
    .rich-checkbox-buttons__text-item
      span.rich-checkbox-buttons__text_bold Label text
      span.rich-checkbox-buttons__p= 'item text'

    input.rich-checkbox-buttons__input.js-rich-checkbox-buttons__input(
      tabindex = "-1"
      type = "checkbox"
      checked = checked
      name = 'rcb-1'
      value = 'item-value'
    )

.rich-checkbox-buttons__item {
  display: flex;
  flex-direction: row;
  margin-bottom: 9px;
}

.rich-checkbox-buttons__input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.rich-checkbox-buttons__text-item {
  display: flex;
  flex-direction: column;
}

.rich-checkbox-buttons__text::before {
  position: absolute;
  display: inline-block;
  align-items: flex-start;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
  border: 1px solid gray;
  border-radius: 4px;
  cursor: pointer;
  content: '';
}

.rich-checkbox-buttons__text::before + .rich-checkbox-buttons__input:checked {
  background-image: url('https://cdn-icons-png.flaticon.com/512/33/33281.png');
  background-size: 12px 12px;
  border-color: green;
}

.rich-checkbox-buttons__text {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.rich-checkbox-buttons__text_bold {
  margin-bottom: 6px;
  margin-left: 30px;
  color: black;
  font-weight: bold;
  font-size: 14px;
}

.rich-checkbox-buttons__p {
  margin-left: 30px;
  color: gray;
  font-weight: normal;
  font-size: 12px;
}

Answer 1

In the markup, the input should be located first

<input type=checkbox>
<label>Checkbox</label>

input[type=checkbox]:checked + label {
}