如何在html中为切换开关添加标题？

Question

I am trying to add a title to a toggle switch above it in html. However, it is getting hidden behind the switch itself. When I increase the font, I do see it. But, I do not want to increase the font. Following is the code snippet and its results:

HTML:

<label className="hrow switch form-group pull-right">
   <input type="checkbox"><span className="slider round"></span>Active</input>
</label>

CSS (for the switch):

/* The switch - the box around the slider */ .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    display: none;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: lightgray;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #85a3e0;
}

input:focus + .slider {
    box-shadow: 0 0 1px #85a3e0;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

RESULTS:

results

Answer 1

Try moving the label content outside of the input element and using the for attribute to ensure click pass through. This should be easier to style than what you were doing before.

 label.switch input { display: block; } 

 <label class="switch" for="checky"> Active <input id="checky" type="checkbox"> </label> 

Note: You also have an error in your HTML. className should be class (edit: Except if you are using React)