Can someone please help me troubleshoot why the transition effect on the input's before element is not working when checked?
If I can't solve this issue, I might have to consider alternative solutions.
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;
}<input type="checkbox">