checkbox: Display content on Styled HTML checkbox

samedi 4 juin 2022

Display content on Styled HTML checkbox

My code is like below.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: #111111;
                flex-direction: column;
            }

            input[type="checkbox"] {
                position: relative;
                width: 120px;
                height: 40px;
                margin: 10px;
                outline: none;
                background: #222222;
                -webkit-appearance: none;
                cursor: pointer;
                border-radius: 20px;
                transition: 0.5s;
            }

            input[type="checkbox"]:checked {
                background: #20b7ff;
            }

            input[type="checkbox"]:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 80px;
                height: 40px;
                background-color: #ffffff;
                border-radius: 20px;
                transform: scale(0.98, 0.96);
                transition: 0.5s;
            }

            input[type="checkbox"]:after {
                content: 'Hello';
            }

            input[type="checkbox"]:checked::before {
                left: 50px;
            }
        </style>
    </head>
    <body>
        <label>
            <input type="checkbox" name="btn" />
        </label>
    </body>
</html>

I am getting output like below.