I need to know why my Transition effect not working for input:checked::before

I want to give transition effect to the before element of input when checked but its not working.

    <input type="checkbox">

I need to know why this is not working. Or else I have to try something new

      input[type="checkbox"]{
        width: 160px;
        height: 50px;
        appearance: none;
        outline: none;
        position: absolute;
        align-items: center;
        display: flex;
        margin: 13px;
        }
    
      input[type="checkbox"]:checked::before{
        position: absolute;
        right: 0;
        transition: 0.5s linear;
      }
    
      input[type="checkbox"]::before{
        content: '';
        width: 75px;
        height: 44px;
        right: 100;
        position: absolute;
        margin: 1px;
        transition: 0.5s ;    
      }
    
      div{
        width: 200px;
        height: 70px;
        position: absolute;
        align-items: center;
        display: flex;
        margin: 20px;
        }
    
     


Read more here: https://stackoverflow.com/questions/67389577/i-need-to-know-why-my-transition-effect-not-working-for-inputcheckedbefore

Content Attribution

This content was originally published by Shubham Singhvi at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: