Mat-Stepper回退至已完成步骤时，如何添加步骤间水平线？

可以通过CSS样式完全解决这个问题，针对Angular Material的Mat-Stepper结构，我们可以强制显示已完成步骤与后续步骤之间的连接线：

全局样式方案 #

在全局样式文件（如styles.css）中添加以下代码：

/* 确保水平步进器中所有步骤间的连接线始终显示 */
.mat-horizontal-stepper .mat-step:not(:last-child) .mat-stepper-horizontal-line {
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.12) !important; /* 匹配默认连接线颜色 */
}

组件内样式方案 #

如果需要仅在当前组件生效，需使用::ng-deep穿透Angular的样式隔离：

::ng-deep .mat-horizontal-stepper .mat-step:not(:last-child) .mat-stepper-horizontal-line {
  opacity: 1 !important;
}

特定步骤定位（可选） #

如果只需要显示A2与A3之间的线，可以通过步骤索引精准控制：

::ng-deep .mat-horizontal-stepper .mat-step:nth-child(2) .mat-stepper-horizontal-line {
  opacity: 1 !important;
}

原理说明：默认状态下，当回退到已完成步骤时，Angular Material会自动隐藏后续步骤的连接线。通过强制设置opacity:1，可以覆盖默认的隐藏逻辑，让连接线始终保持可见，同时保留原生的视觉样式。

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