使用 ::before 和 ::after 伪元素从左向右移动元素
Using ::before & ::after pseduo elements to move element from left to right
对于将 ::before
和 ::after
与 CSS 结合使用还很陌生。这是我目前所拥有的:
我有一个由 StyledLabel
之前和之后创建的复选框 - 我基本上只是想交换复选框和标签的顺序,以便复选框出现在(右侧)之后的)标签?
.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>
我在 css 中添加了注释以显示您需要更改的内容。
.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>
这里不需要使用定位,只要flexbox和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>
对于将 ::before
和 ::after
与 CSS 结合使用还很陌生。这是我目前所拥有的:
我有一个由 StyledLabel
之前和之后创建的复选框 - 我基本上只是想交换复选框和标签的顺序,以便复选框出现在(右侧)之后的)标签?
.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>
我在 css 中添加了注释以显示您需要更改的内容。
.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>
这里不需要使用定位,只要flexbox和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>