z-index:-1无法隐藏Font Awesome图标后方内容，求解决方案

设置z-index:-1无效的原因是.progress-icon本身未设置定位属性，导致伪元素的层级调整无法生效。只需给复选图标添加定位和层级设置，就能让图标覆盖下方的线条：

修改关键CSS代码 #

给.progress-icon添加以下属性：

.application-intro .progress-icon {
  color: #ccc;
  padding: 5px;
  font-size: 1.5rem;
  /* 新增定位与层级设置 */
  position: relative;
  z-index: 1;
}

修改后的完整CSS代码 #

.application-intro a { color: inherit !important; }
.application-intro .step-icons { color: #4c5280; font-size: 4rem; margin-bottom: 20px; margin-right: 5px; border: solid 1px transparent; }
.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; 
  font-size: 1.5rem; 
  position: relative; 
  z-index: 1; 
}
.application-intro .progress-icon::after { content: ''; background: #ccc; height: 5px; width: 110%; position: absolute; left: 0; 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; }
.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%;}

原理说明 #

伪元素.progress-icon::after是相对于父级li（已设置position: relative）定位的，而.progress-icon默认是静态定位，所以伪元素会显示在图标上方。给图标添加position: relative后，它会创建独立的层级上下文，再设置z-index:1就能让图标覆盖在伪元素线条之上，达到隐藏线条的效果。

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