checkbox美化成switch

html:<input type="checkbox" class="switch">

css:

.switch{

appearance: none; -webkit-appearance: none;

position: relative;

border-radius: 3rem; padding:0 .1rem;

    width: 1.3rem;  outline: none;border:none;

    height: .6rem; background-color: #999;

    transition:all 0.4s ease 0s;

}

.switch:checked{background-color: #2a80c8;}

.switch:checked::before {

    content: "YES"; transform:translateX(.14rem);

}

.switch::before {

    content: "NO"; position: absolute;

    top:.1rem; left:0;

    transform:translateX(.7rem);

    line-height: .4rem;

    font-size: .24rem;

    font-weight: 600;

    color: #fff;

    white-space: nowrap;

    overflow: hidden; 

}

.switch::after{

position: absolute; top:.05rem; right:.1rem;

    width: .5rem; transform:translateX(-.6rem);

    height: .5rem;

content: "";

    background-color: #fff;

    border-radius: inherit;

    transition: -webkit-transform 80ms;

    transition: transform 80ms;

    transition: transform 80ms,-webkit-transform 80ms;

}

.switch:checked::after{transform:translateX(0);}