使用:before、:after创建的进度指示器如何与输入框水平对齐

问题修复方案 #

三个问题的核心原因和修改方式如下：

• 文字无法显示白色：:before 生成的黑色圆形默认层级高于文字，直接把文本覆盖了。给 .progress-indicator::before 添加 z-index: -1 降低圆形层级即可。
• 圆形和输入框无法水平对齐：外层flex容器没有设置交叉轴对齐规则，加上 .progress-indicator 有多余的底部外边距导致偏移。给 .progress-container 添加 align-items: center，同时删除 .progress-indicator 上的 margin-bottom: 40px，再给 .progress-indicator 新增和圆形匹配的宽高、行高、居中属性保证文字在圆内居中即可。
• 圆形和虚线间隙过大：:after 虚线的 top 偏移值设置过大，将 top: 49px 改为 top: 22px 即可让虚线刚好贴合圆形底部。

修改后的完整代码如下：

CSS代码

.progress-container {
  display: flex;
  position: relative;
  align-items: center;
}

.progress-indicator {
  position: relative;
  display: inline-block;
  color: #fff;
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 22px;
}

.progress-indicator::before {
    content: "";
    width: 22px;
    height: 22px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
}

.progress-indicator::after {
    content: "";
    height: 85px;
    border: 2px dashed #a9b4b8;
    position: absolute;
    left: 50%;
    top: 22px;
    transform: translateX(-50%);
    margin-bottom: 10px;
}

.input-container {
  display: flex;
  align-items: center;
}

.input-wrapper {
  border: 1px solid #ced4da;
  border-radius: 2px;
  overflow-y: hidden;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  margin-left: 30px;
}

HTML代码

<div class=progress-container>
  <div class="progress-indicator">1</div>
  <div class="input-container">
    <div class="input-wrapper">
      <div>Input</div>
    </div>
  </div>
</div>

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