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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
I have added comments in css to show what you need to change.
.wrapper {
display: inline-flex;
min-height: 1.5rem;
/*padding-left: 1.5rem;*/ /* change this */
padding-right: 1.5rem; /* to this */
/*margin-right: 1rem;*/ /* change this */
margin-left: 1rem; /* to this or remove of you will */
}
.label {
position: relative;
margin-bottom: 0;
}
.label:before {
content: '';
position: absolute;
top: 4px;
/*left: -24px;*/ /* change this */
right: -24px; /* to this */
display: block;
width: 20px;
height: 20px;
pointer-events: none;
background-color: #fff;
border: 1px solid black; /* added just to show where this element is */
}
.label:after {
content: '';
position: absolute;
top: 4px;
/*left: -24px;*/ /* change this */
right: -24px; /* to this */
display: block;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
<div class="wrapper">
<label class="label">
<span class="label-wrapper">In progress</span>
</label>
</div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>