before after css не работает, если у нас есть какой-то промежуточный элемент

#html #css #css-selectors

#HTML #css #css-селекторы

Вопрос:

 <input type="checkbox" name="NotifyWhenOpen" value="true">
<input type="hidden" name="NotifyWhenOpen" value="false">
<label for="NotifyWhenOpen">amp;nbsp;</label>

Приведенный выше html не работает, в то время как приведенный ниже работает

 <input type="checkbox" name="NotifyWhenOpen" value="true">
<label for="NotifyWhenOpen">amp;nbsp;</label>
<input type="hidden" name="NotifyWhenOpen" value="false">

CSS:

 .checkbox { position: relative; margin-top: 2px; padding: 0; display: inline-block }
.checkbox input[type=checkbox] { display: none; padding-left: 0; }  
.checkbox label:before { border-radius: 3px;  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottom: 1px; background: #eef5f7; border: 1px solid #999; } 
input[type=checkbox]:checked   label:before { content: "2713"; font-size: 13px; color: #0090D9; text-align: center; font-weight: 600; line-height: 15px; }

Скрипка Js:http://jsfiddle.net/x8VGB /

Как заставить его работать и с первым?

Ответ №1:

В первом примере ваш label элемент не является смежным аналогом вашего checkbox ввода (скрытый ввод находится посередине): поэтому вам нужно использовать общий селектор родственных элементов ~ для назначения несмежного родственного элемента

 input[type="checkbox"]:checked ~ label:before

Смотрите Документы MDN для получения дополнительной информации и поддержки браузера

Ответ №2:

Вам нужно использовать другой

Используйте ~ вместо