Как использовать общий селектор братьев и сестер с :: после от своего родителя

Question

Я хочу использовать состояние из флажка, чтобы показать и скрыть :: после того, кто является общим братом из этого. Я использую этот код, может быть, вы можете помочь мне с этой проблемой. спасибо.

.form-check label {
  position: relative;
}

.form-check label:after {
  content: " ";
  height: 25px;
  width: 25px;
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  right: -30px;
  top: 0;
  background-color: red;
}

.form-check [type="checkbox"]:checked~ ::after {
  background-color: blue;
}

<div class="form-check">
  <label class="form-check-label" for="example">
			<input class="form-check-input" type="checkbox" value="" id="example">
			<span>Example</span>
			::after
		</label>
</div>

Answer 1

Проблема в том, что вам не хватает основных свойств & ndash; content, height, width и display & ndash; из CSS; если вы добавите их, то отправленный код работает:

.form-check label {
  position: relative;
}

.form-check label:after {
  content: " ";
  height: 25px;
  width: 25px;
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  right: -30px;
  top: 0;
  background-color: red;
}

.form-check [type="checkbox"]:checked~ ::after {
  /* forces the creation of the pseudo-element, without content
     it effectively doesn't exist: */
  content: '';
  /* because an empty string doesn't have any height, or width, by
     default we need to assign arbitrary non-zero values: */
  height: 1em;
  width: 1em;
  /* the ::before and ::after pseudo-elements are 'display: inline'
     by default, so to enable the element to accept its assigned width
     we make it 'display: inline-block' instead (though other values
     could be used if preferred): */
  display: inline-block;
  background-color: blue;
}

<div class="form-check">
  <label class="form-check-label" for="example">
			<input class="form-check-input" type="checkbox" value="" id="example">
			<span>Example</span>
		</label>
</div>

Стоит отметить, что поставляемый селектор:

.form-check [type="checkbox"]:checked ~ ::after

выберет все ::after псевдоэлементы, которые следуют установленному флажку; Вы можете изменить селектор, чтобы уменьшить вероятность случайных совпадений:

.form-check [type="checkbox"]:checked ~ span::after

Что будет соответствовать всем ::after псевдоэлементам <span> элементов или:

.form-check [type="checkbox"]:checked + span::after

соответствует только псевдоэлементу ::after смежного элемента <span>.

Ссылки:

• ::after.
• Комбинатор смежного брата (+) .
• content
• Комбинатор общего брата (~) .

Библиография:

• " Каково свойство отображения по умолчанию для псевдоэлементов [::before] и [::after]? .

Answer 2

После <input> должен быть элемент, чтобы использовать такой псевдоэлемент.В этом случае у вас есть <span> там.

.form-check [type="checkbox"]:checked  ~  span::after {
    background-color: blue;
}