HTML+CSS3实现switch开关

1. input标签 CheckBox类型，label伪元素

<style>
        .my_switch {
            display: none;
        }

        .my_switch + label {
            display: inline-block;
            box-sizing: border-box;
            height: 22px;
            min-width: 70px;
            line-height: 22px;
            vertical-align: middle;
            border-radius: 100px;
            border: 1px solid transparent;
            background-color: rgba(0, 0, 0, 0.25);
            cursor: pointer;
            -webkit-transition: all 0.36s;
            transition: all 0.36s;
            position: relative;
        }

        .my_switch:checked + label {
            background-color: #1890ff;
        }

        .my_switch + label::before {
            content: "";
            display: block;
            width: 18px;
            height: 18px;
            position: absolute;
            left: 1px;
            top: 1px;
            border-radius: 18px;
            background-color: #fff;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.78, 0.14, 0.15, 0.86);
            -webkit-transition: all 0.5s cubic-bezier(0.78, 0.14, 0.15, 0.86);
            -webkit-box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
            box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
        }

        .my_switch:checked + label::before {
            left: 49px;
            transition: all 0.5s cubic-bezier(0.78, 0.14, 0.15, 0.86);
            -webkit-transition: all 0.5s cubic-bezier(0.78, 0.14, 0.15, 0.86);
        }

        .my_switch + label::after {
            line-height: 18px;
            content: "未修复";
            color: #fff;
            vertical-align: middle;
            position: absolute;
            top: 2px;
            left: 23px;
            font-size: 12px;
        }

        .my_switch:checked + label::after {
            line-height: 18px;
            vertical-align: middle;
            color: #fff;
            content: "已修复";
            left: 8px;
        }
</style>
<input type="checkbox" id="my_switch" class="my_switch" onclick="on_off()"/>
<label id="label" for="my_switch"></label>

<script>
    function on_off() {
        console.log(getComputedStyle(document.querySelector('#label'), ':after').getPropertyValue('content'));
    }
</script>