在 CSS 中更改使用 ::before 和 ::after 创建的元素的顺序

Question

我已尝试将我的问题简化为以下内容：

.wrapper {
  position: relative;
  display: inline-flex;
  min-height: 1.5rem;
  border: 1px solid black;
  margin-right: 1rem;
  padding-right: 1.5rem;
}

.input {
  position: absolute;
  z-index: -1;
  opactiy: 0;
}

.label-wrapper {
  margin-left: 2rem;
}

.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: #fff;
  }

.label:after {
   position: absolute;
   top: 4px;
   left: -24px;
   display: block;
   height: 40px;
   content: "";
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 50% 50%;
}

<div class="wrapper">
  <input class="input" type="checkbox"></input>
  <label class="label">
    <div class="label-wrapper">
      Option 1
    </div>  
  </label>
</div>

除此之外，我还有以下 CSS（在 StyledComponent 中），当用户单击 [=15] 中隐藏的 input 时，它会向复选框添加一个“选中” =]:

  &[type="checkbox"]:checked ~ label::after {
    background-image: url("${checkboxImage}");
    top: -2px;
    left: -29px;
    width: 30px;
    height: 30px;
  }

这意味着它的行为应该像复选框一样 - 但是，我想交换我的元素，以便复选框位于文本的右侧而不是左侧，为此我尝试重新排序 input 以便它出现在 label 之后，但随后隐藏的输入（处理实际点击行为与 CSS 复选框脱节？任何人都可以指出我的方向解决这个问题？

总结：使用 :before & :after 创建一个可视复选框，但该复选框的逻辑实际上由 input （隐藏）处理 - 如何将可视输入和隐藏输入移动到文字右边?

编辑：

Answer 1

您是否要更改元素从左到右的默认位置？如果是这种情况，您可以使用文本对齐或浮动。甚至弹性盒子。另外，将文本放在 span 或其他内容中，以便您可以控制它。

如果我没理解错的话，有很多基于上下文的方法，比如使用绝对定位，或者将标签放在输入之前并关闭它。或类似这样的内容：

<label class="">
    <span class="">text</span>
    <input class="" type="checkbox" name="order">        
</label>

Answer 2

使用 display: flex 和 flex-direction: row-reverse 非常简单。

.label-wrapper {
  margin-left: 24px;
  margin-right: 0;
  flex-grow: 1; /* ADDED THIS */
}

.label {
  position: relative;
  margin-bottom: 0;
  display:flex;
  flex-direction: row;
  flex: 1; /* ADDED THIS */
}
.label.reverse{
  flex-direction: row-reverse;
}

请参阅下面的代码段：

.wrapper {
  position: relative;
  display: inline-flex;
  min-height: 1.5rem;
  border: 1px solid black;
  margin-right: 1rem;
  padding: 0.5rem;
  width: 200px;
}

.input {
  position: absolute;
  z-index: -1;
  visibility: hidden;
}

.label-wrapper {
  margin-left: 24px;
  margin-right: 0;
  flex-grow: 1;
}

.label.reverse > .label-wrapper {
  margin-left: 0;
  margin-right: 24px;
}

.label {
  position: relative;
  margin-bottom: 0;
  display:flex;
  flex-direction: row;
  flex: 1;
}

.label.reverse{
  flex-direction: row-reverse;
}

 .label:before {
 position:absolute;
    display: block;
    width: 20px;
    height: 20px;
    content: "";
    background-color: #fff;
    border: 1px solid black;
    border-radius:4px;
  }

.label:after {
   position: absolute;
   display: block;
   height: 20px;
   content: "";
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 80%;
}

input[type="checkbox"]:checked ~ .label::after {
    background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
    width: 20px;
    height: 20px;
  }

<div class="wrapper">
  <input class="input input1" name="checkbox1" id="checkbox1" type="checkbox">
  <label class="label" for="checkbox1">
    <div class="label-wrapper">
      Option 1
    </div>  
  </label>
</div>


<div class="wrapper">
  <input class="input input2" name="checkbox2" id="checkbox2" type="checkbox">
  <label class="label reverse" for="checkbox2">
    <div class="label-wrapper">
      Option 2
    </div>  
  </label>
</div>

在 CSS 中更改使用 ::before 和 ::after 创建的元素的顺序

Changing the order of elements created using ::before and ::after in CSS

html

css

styled-components