进度条首步骤对齐异常：编号圆形偏高数像素的原因及修复

问题场景 #

正在排查进度条的对齐异常：第一个步骤的位置比其他步骤略高，整体偏差只有几像素，翻来覆去也找不到错位的原因。能看到带数字1的圆形节点，垂直中心比其他步骤的圆形要高一些，这个问题只在当前环境下出现，试了好多种方法都没修好。

带连线的进度条问题示例图

现有实现代码 #

CSS 样式 #

.progressbar {
  counter-reset: step;
}
.progressbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}
.progressbar li:before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step;
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}
.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active {
  color: green;
}
.progressbar li.active:before {
  border-color: #55b776;
}
.progressbar li.active + li:after {
  background-color: #55b776;
}

HTML 结构 #

<ul class="progressbar">
  <li class="active">Complete Basic Information</li>
  <li>Add Secondary Owner(s)</li>
  <li>Review</li>
  <li>Export</li>
</ul>

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