是否可以在 :before & :after 伪元素中复制 "flex-end" 的行为

Question

我有下面的代码，它使用 :before & :after 创建一个复选框，然后利用隐藏的 input 来处理选择项目的逻辑。一切都按预期工作，我对这种行为很满意，但是我想知道是否可以使复选框（在 :before 和 :after 中创建）位于包装器像这样：

我通常会使用 flex-end，但那当然会将整个标签（带有复选框）移动到包装器的末尾。

.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;
}

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

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

.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" name="checkbox2" id="checkbox2" type="checkbox">
  <label class="label reverse" for="checkbox2">
    <div class="label-wrapper">
      Option 1
    </div>  
  </label>
</div>

Answer 1

Css:-

label {
    float: left;
    margin: 5px 0px;
}

input {
    float: right;
    margin: 5px 0px;
    width: 200px;
}

.clear {
    clear: both;
}

html

<label for="autologin">Option 1</label>
<input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1">
<div class="clear"></div>

Answer 2

.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;
  }
  
  .label.reverse > .label-wrapper {
    margin-left: 0px;
    margin-right: 24px;
  }
  
  .label {
    position: relative;
    margin-bottom: 0;
    display:flex;
    flex-direction: row;
  }
  
  .label.reverse{
    flex-direction: row-reverse;
    
  }
  
   .label:before {
      display: block;
      width: 20px;
      height: 20px;
      content: "";
      background-color: #fff;
      border: 1px solid black;
      border-radius:4px;
      margin-left:90px
    }
  
  .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" name="checkbox2" id="checkbox2" type="checkbox">
        <label class="label reverse" for="checkbox2">
          <div class="label-wrapper">
            Option 1
          </div>  
        </label>
      </div>

Answer 3

当弹性项目被绝对定位时，它会从弹性格式化上下文中移除。换句话说，大多数弹性属性将不再起作用。 （参见 flexbox 规范：§4.1. Absolutely-Positioned Flex Children）

尝试从复选框中删除 position: absolute。

对您的 CSS 代码进行三处简单的调整：

.label.reverse {
  flex-direction: row-reverse;
  justify-content: space-between; /* new; pin items to opposite ends */
  flex: 1; /* new; give container full width of parent */
}

.label:before {
  /* position: absolute; */ /* keep item in flex formatting context */
  display: block;
  width: 20px;
  height: 20px;
  content: "";
  background-color: #fff;
  border: 1px solid black;
  border-radius: 4px;
}

.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;
}

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

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

.label.reverse {
  flex-direction: row-reverse;
  justify-content: space-between; /* new; pin items to opposite ends */
  flex: 1; /* new; give containe full width of parent */
}

.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" name="checkbox2" id="checkbox2" type="checkbox">
  <label class="label reverse" for="checkbox2">
    <div class="label-wrapper">
      Option 1
    </div>  
  </label>
</div>

是否可以在 :before & :after 伪元素中复制 "flex-end" 的行为

Is it possible to replicate behaviour of "flex-end" in :before & :after pseudo-elements

html

css

flexbox

pseudo-element