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

【问题标题】：Using css ::after to create horizontal dash after input without impacting other elements使用 css ::after 在输入后创建水平破折号而不影响其他元素
【发布时间】：2021-11-26 19:44:09
【问题描述】：

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

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

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

Codepen：https://codepen.io/simoncunningham/pen/mdwMgyL

【问题讨论】：

我不知道为什么你有不同的margin 值，但这会导致破折号周围的空格不相等。 this是你想要的吗？请注意，您在 styled-group-two 之前忘记了 .
感谢 Mosh - 抱歉，我对 sn-p 进行了编辑以更准确地反映问题 - 其中包括两列。因此“-”与它们的填充发生冲突并将输入移得更远。
感觉你的html结构比需要的复杂。它是给定的，还是您可以随意更改？如果是这样，您能指定可以更改的内容吗？无论如何，我强烈建议不要在有其他选项时使用position: absolute - 它并不总是响应式的，当事情发生变化时它很容易损坏，并且在浏览器中看起来可能会有所不同。

标签： css css-selectors pseudo-element

【解决方案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;
}

【讨论】：