Checkbox und Label Ausrichtung

Question

Also habe ich ein kleines Problem und ich kann nicht herausfinden, was zu tun ist. Ich habe eine Checkbox und ein Label. Und ich möchte das Etikett ein paar Pixel nach unten absenken, ohne das Kontrollkästchen zu berühren.

Wie kann ich dies mit dieser Codestruktur erreichen - hier ist die Fiddle?

Und hier ist der Code:

<div class="form-check"> 
    <span class="custom-checkbox-container mr-2"> 
    <input type="checkbox" id="first_checkbox"> 
    <label for="first_checkbox">Checkbox</label> 
    </span> 
</div> 

.form-check {  
    margin-bottom: 0; 
    margin-top: 3px; 
.custom-checkbox-container { 
    input[type="checkbox"] { 
    display: none; 
    & + label { 
     position: relative; 
     font-family: 'Open Sans', sans-serif; 
     letter-spacing: 0.5px; 
     font-size: 10px; 
     color: #292a2c; 
     text-transform: uppercase; 
     font-weight: 700; 
    } 
    & + label:before { 
     content: " "; 
     box-sizing: border-box; 
     display: inline-block; 
     vertical-align: middle; 
     width: 20px; 
     height: 20px; 
     margin-right: 8px; 
     border: 2px solid #787878; 
    } 
    & + label:after { 
     content: " "; 
     opacity: 0; 
     position: absolute; 
     width: 12px; 
     height: 7px; 
     top: 4px; 
     left: 4px; 
     background: transparent; 
     border: 2px solid #787878; 
     border-top: none; 
     border-right: none; 
     transform: rotate(-45deg); 
     transition: opacity .3s; 
    } 
    &:checked + label:after { 
     opacity: 1; 
    } 
    } 
    } 
} 

Thank you!

Answer 1

Sie könnten versuchen, eine zusätzliche span im Inneren des Etiketts Zugabe

<label for="first_checkbox"> 
    <span>Checkbox</span> 
</label> 

und der CSS

label>span { 
    position: relative; 
    bottom: -2px; 
} 

Answer 2

Sie unbedingt das Kontrollkästchen positionieren kann, dann benutzen Sie einfach padding-top auf dem labelhttps://jsfiddle.net/9gr4pv69/4/