使用 css ::after 在输入后创建水平破折号而不影响其他元素

Question

使用 ::after 在两个输入之间创建一个“-”。问题是我需要在两个输入之间移动破折号中心，我一直在尝试通过添加 margin 或 padding 来做到这一点，但随后将第二个输入推得更远，这是不可能发生的.

如何调整我当前的代码以允许“-”移动到 left/right 而不推动其他元素？

.column {
  padding-right: 24px;
  padding-left: 24px;
}

.styled-group, styled-group-two {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.styled-group::after {
  content: "-";
  margin: 0 5px;
  height: 1px;
}

.input-two {
  width: 45px;
}

.container {
  display: flex;
}

<div class="container">
  <div class="column">
    <div class="styled-group">
      <input class="input-one" type="text">
    </div> 
  </div>  
  <div class="column">
    <div class="styled-group-two">
      <input class="input-two" type="text">
    </div> 
  </div>    
</div>

代码笔：https://codepen.io/simoncunningham/pen/mdwMgyL

Answer 1

如果你不介意给输入留余量，这可以通过绝对定位来处理。

.styled-group,
styled-group-two {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.styled-group input {
  margin: 0rem 1rem;
}

.styled-group::after {
  content: "-";
  position: absolute;
  left: 95%;
  height: 1px;
}

.input-two {
  width: 45px;
}

.container {
  display: flex;
}

使用 css ::after 在输入后创建水平破折号而不影响其他元素

Using css ::after to create horizontal dash after input without impacting other elements

css

css-selectors

pseudo-element