fairly new to using ::before
& ::after
with CSS. Here's what I have so far:
I have the checkbox that is created by the before & after on the StyledLabel
- I basically just want to swap the order of the checkbox and the label, so that the checkbox comes after (to the right of) the label?
.wrapper {
display: inline-flex;
min-height: 1.5rem;
padding-left: 1.5rem;
margin-right: 1 rem;
}
.label {
position: relative;
margin-bottom: 0;
}
.label:before {
position: absolute;
top: 4px;
left: -24px;
display: block;
width: 20px;
height: 20px;
pointer-events: none;
content: "";
background-color: red;
}
.label:after {
position: absolute;
top: 4px;
left: -24px;
display: block;
width: 40px;
height: 40px;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
}
<div class="wrapper">
<label class="label">
<div class="label-wrapper">In progress</div>
</label>
</div>
You don't need to use positioning here, just flexbox and row-reverse
.wrapper {
display: inline-flex;
align-items: center;
min-height: 1.5rem;
padding-left: 4px;
margin-right: 1rem;
border:1px solid grey;
}
.label {
display: flex;
flex-direction:row-reverse;
position: relative;
margin-bottom: 0;
}
.label:before {
display: block;
width: 20px;
height: 20px;
pointer-events: none;
content: "";
background-color: red;
margin:0 4px;
}
<div class="wrapper">
<label class="label">
<div class="label-wrapper">In progress</div>
</label>
</div>