Manipulate a checkbox to have CSS rotate when unchecked

I made a mobile navigation with a checkbox to have a dropdown menu. When the checkbox is checked (the nav is 'open'), it rotates 180deg, so the arrow faces upwards. I would like to have the same effect backwards when I click on it. The problem is that I do not know how to reach a state like checkbox:unchecked (which doesn't make sense, because a checkbox is unchecked by default else you do not define checked in html) or should I use something like :after?

I tried something like this but did not work ( I guess I am not using right syntax)

     #menu-toggle:checked~label i  {    /*Rotates when checked*/
     
         transform: rotate(180deg);
         transition: all ease-in-out .3s
      }

     #menu-toggle:checked:after~label i  {  /*My trial to reach the same reverse rotation when unchecked*/
         transform: rotate(-180deg);
         transition: all ease-in-out .3s
      }

1.Arrow in default state:

2. Arrow facing up when checked:

Only CSS, no JS or jQuery now. Thank you!