css - CSSのみを使用してチェックボックス内にチェックを描画する

Question

cssのみを使用して画像を使用せずにカスタムチェックボックスを作成しようとしていますが、少し問題があります。

オンラインでいくつかのチュートリアルに従いましたが、障害にぶつかったようで、助けていただければ幸いです。

私のcssは次のようになります

input[type='checkbox'] {
  -webkit-appearance: none;
  background: #dee1e2;
  width: 1.3em;
  height: 1.3em;
  border-radius: 3px;
  border: 1px solid #555;
  position: relative;
  bottom: .3em;
}

input[type='checkbox']:checked {
    -webkit-appearance: none;
    background: #dee1e2;
    width: 1.3em;
    height: 1.3em;
    border-radius: 5px;
    position: relative;
    bottom: .3em;
    -webkit-transform: rotate(45deg);
}

ボックス全体を回転させ、 :after を追加しようとしましたが、何もしなかったようです。