wordpress Contact Form7の承認確認ボタンに疑似要素:afterが効かない

Question

HtmlデータのWordpressテーマ化を行っています。

wordpress ContactForm7　承認確認ボタンに疑似要素:afterが表示されなくて困っています。

問い合わせフォームをContactForm7で作成中です。
承認確認ボタンに疑似要素:afterで作成したチェックマークがブラウザに表示されません。

チェックを入れないと、問い合わせを送信できないようにしております。
承認確認ボタンにチェックは表示されませんが、承認確認ボタンをクリックしないと問い合わせを送信できないので、承認確認ボタンは機能しているようです。

ではなぜ疑似要素:afterで作成したチェックマークがブラウザに表示されないのか、どうしても分かりません。　

元のHTML データ、CSSは以下です。

<label>
　<input type="checkbox" name="checkbox[]" class="checkbox-input">
　　<span class="checkbox-parts">同意する</span>
</label>

.contactForm .checkbox-input {
    display: none;
}

.contactForm .checkbox-parts {
    display: inline-block;
    margin: 15px 0 0 0;
    padding: 0 0 0 40px;
    position: relative;
    cursor: pointer;
    transition: all 400ms;
}

.contactForm .checkbox-parts:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    border: 1px solid #999;
}

.contactForm .checkbox-parts:after {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 9px;
    width: 8px;
    height: 16px;
    transform: scale(1.4, 1.4) rotate(40deg);
    border-bottom: 3px solid #e50c7d;
    border-right: 3px solid #e50c7d;
    opacity: 0;
    transition: all 0.2s;
}

ContactForm7で承認確認ボタンを設置後のHTMLは以下です。

<span class="wpcf7-form-control-wrap acceptance-413">
 <span class="wpcf7-form-control wpcf7-acceptance">
  <span class="wpcf7-list-item">
   <label>
     <input type="checkbox" name="acceptance-413" value="1" aria-invalid="false" 
       class="checkbox-input">
      <span class="wpcf7-list-item-label">
        <span class="checkbox-parts">同意する</span>
      </span>
   </label>
  </span>
 </span>
</span>

CSSに変更ありません。

wordpress管理画面、ContactForm7の設定画面では以下のようにしております。

結果は以下です。

ContactForm7で承認確認ボタンを設置後のhtmlにもcssは当たっているのですが、spanタグで.contactForm .checkbox-parts:after作成したチェックボックスにチェックが入りません。 (デベロッパーツールではcssが当たっているようです。)

        <span class="checkbox-parts">同意する</span>

を

     <input type="checkbox" name="acceptance-413" value="1" aria-invalid="false" 
       class="checkbox-input">

の直下に置ければ:afterが表示される(意図したデザインを実現できる)ことは分かりました。

しかし、ContactForm7で出力されたspanタグ

<span class="wpcf7-list-item-label">

があるので、<input>の直下にできません。
<span class="wpcf7-list-item-label">に:before :afterを指定しても<input>の直下とはならないために:afterが表示されません。。。。

どこを調整すれば、チェックが表示されるようになるでしょうか?
アドバイスをお願いします。