<div class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox__input">
<label for="checkbox" class="checkbox__label"></label>
<p class="checkbox__text">Lorem ipsum <a href="#">policy</a> aspernatur minima.</p>
</div>
.checkbox {
position: relative;
}
.checkbox__input {
position: absolute;
visibility: hidden;
}
.checkbox__input:checked ~ .checkbox__text::before {
background: green;
}
.checkbox__label {
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
.checkbox__text {
gap: 20px;
}
.checkbox__text::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
margin-right: 8px;
border: 1px solid #000;
}
.checkbox__text a {
position: relative;
z-index: 2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.