So I have a small issue and I can't seem to figure out what to do. I have a checkbox and a label. And I want to lower the label a few pixels down, without touching the checkbox.
How can I achieve this with this code structure - here's the Fiddle?
And here's the code:
.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!