使用content-box的背景剪辑（使用border-radius:50%四舍五入），然后返回z索引。可能出现一些子像素轮廓。

.application-intro a {
  color: inherit !important;
}
.application-intro .step-icons {
  color: #4c5280;
  font-size: 4rem;
  /* width: 80px; */
  margin-bottom: 20px;
  margin-right: 5px;
  border: solid 1px transparent;
  /* width: 20px; */
}
.application-intro ul {
  text-align: center;
}
.application-intro ul li {
  display: inline-block;
  width: 30%;
  position: relative;
}
.application-intro .progress-icon {
  color: #ccc;
  padding: 5px;
  /* width: 80px; */
  font-size: 1.5rem;
}
.application-intro .progress-icon::after {
  content: '';
  background: #ccc;
  height: 5px;
  width: 110%;
  position: absolute;
  left: 0;
  /*add z-index*/
  z-index: -1;
  /* top: 125px; */
  top: 103px;
}
.application-intro span {
  width: 30%;
  display: table;
  font-size: 0.7rem;
  margin-left: 36%;
}
.application-intro li:nth-child(2) .progress-icon {
  color: #148e14;
  /* add some background and cip it by content box*/
  background-clip: content-box;
    background-color: white;
    border-radius: 50%;
}
.application-intro li:nth-child(2) .progress-icon::after {
  background: #148e14;
  
}
.application-intro li:first-child .progress-icon::after {
  width: 95%;
  left: 52%;
}
.application-intro li:last-child .progress-icon::after {
  width: 48%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="application-intro">
  <ul>
    <li><a class="btn" id="fill-application" href=""><i class="fas fa-file-pen step-icons"></i></a><br><i class="fas fa-circle-check progress-icon"></i><span>Lorem Ipsum is simply dummy text</span></li>
    <li><a class="btn" id="submit-kyc" href=""><i class="fas fa-file-arrow-up step-icons"></i></a><br><i class="fas fa-circle-check progress-icon"></i><span>Lorem Ipsum is simply dummy text</span></li>
    <li><a class="btn" id="match-financial" href=""><i class="fas fa-magnifying-glass step-icons"></i></a><br><i class="fas fa-circle-check progress-icon"></i><span>Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text</span></li>
  </ul>
</div>

但更好解决方案是为条形图构建具有单独元素的图形。

使用位置relative和z-index 1作为.fa-circle-check::before元素。但是你应该选择另一个内容，因为你的内容在中间是透明的，你的after元素从你的before元素的透明区域中挑选出来。只要改变你的一个元素的颜色后，应用定位，所以你可以明白我的意思。