【WordPress】MW WP FORM CSSの擬似要素が適用されない

Question

完成形は以下の通りです

ただ、MW FORM FORMで元々のコードをテキストにコピペしたときに、
以下のようにチェックボックスの部分が消えてしまいました。

デフォルトのチェックボックスはdisplay:noneで消して、
擬似要素で記述しています。
css見ても特に変えたところはないのでどこに問題があるのか正直わかりません。
ググっても解決できなかったため、ご教授いただけるとありがたいです。

 <div class="contact-checkbox">
    <input type="checkbox" id="privacyCheck">
    <label for="privacyCheck">プライバシーポリシーに同意する</label>
 </div>

.p-contact .contact_form_dl .contact-checkbox input[type="checkbox"] {
  display: none;
}

.p-contact .contact_form_dl .contact-checkbox input[type="checkbox"]:checked + label::before {
  width: 10px;
  top: -5px;
  left: 10px;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}

.p-contact .contact_form_dl .contact-checkbox input[type="checkbox"] + label {
  position: relative;
  padding-left: 30px;
}

.p-contact .contact_form_dl .contact-checkbox input[type="checkbox"] + label::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #707070;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  transition: all .1s;
}

Answer 1

wordpressで試してみたんですが、アニメーション部分の+が使えないみたいでした

+の代わりに~が使えるので使ってみてください。
https://codepen.io/meko3/pen/VwWwqLJ

Comments

[kogari]

ご回答ありがとうございます。 ~ に書き換えてみたのですが表示されないです。
検証ツールの中見てもbefore自体が見当たらないです

[meko]

wordpressのエディターのエラーで多いのですが、スペースが入っていると、別ブロックになることがあります。
`~`の前後のスペースや、クラスの間のスペースを全て消してみても変わりないですか？
``` css
.p-contact .contact_form_dl .contact-checkbox input[type="checkbox"] {
...
}
　// こういう改行を削除
.p-contact .contact_form_dl .contact-checkbox input[type="checkbox"]~label {
...
}
```

[kogari]

クラス間のスペース消しても変わらないですね。。。

[kogari]

今確認したら反映されてました！
お騒がせしました。
ありがとうございます！