如何使用CSS ::after伪元素在输入框间添加短划线且不挤压其他元素

核心思路：使用绝对定位让伪元素脱离正常文档流，调整其位置时不会对其他元素的布局产生挤压影响。

修改后的完整CSS代码如下：

.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: "-";
  position: absolute;
  /* 先实现和输入框的垂直居中对齐 */
  top: 50%;
  transform: translateY(-50%);
  /* 调整水平位置，直接修改后面的数值即可左右移动，不会影响其他元素 */
  right: -32px;
  line-height: 1;
}

.input-two {
  width: 45px;
}

.container {
  display: flex;
}

调整说明 #

• 给::after伪元素添加position: absolute属性后，它会脱离正常文档流，所有位置调整都不会对周围的输入框、容器等元素产生布局挤压
• 已经通过top: 50% + transform: translateY(-50%)实现短划线和输入框的垂直居中对齐
• 水平位置调整直接修改right属性的数值即可：数值越大，短划线越靠右侧；如果需要向左偏移也可以把right替换为left，调整对应数值即可

内容的提问来源于stack exchange，提问作者cts