Manipulate a checkbox to have CSS rotate when unchecked

Question

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!

Answer 1

It's actually pretty simple, by default a transition on an element makes sure that any kind of change goes smoothly both ways, from initial to desired and backwards. You only need to rotate when checked :

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

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <input type="checkbox" id="menu-toggle"> <label> <i class="fa fa-angle-down" aria-hidden="true"></i> </label>