Angular13 mat-stepper用字符串替代索引数字失败，显示A1等叠加内容

你当前的CSS方案只通过::after追加了自定义文本，原有数字并未隐藏，所以出现了A1、B2这类叠加显示的问题。要实现仅显示自定义字符串，需要先隐藏原有数字，再添加自定义内容，具体方案如下：

解决方案代码 #

首先给你的步进器添加一个自定义类（避免影响全局其他步进器）：

<mat-horizontal-stepper class="custom-stepper">
  <!-- 你的步骤内容 -->
</mat-horizontal-stepper>

然后添加以下CSS：

/* 隐藏原有步进器数字，保留占位空间避免布局偏移 */
::ng-deep .custom-stepper .mat-horizontal-stepper-header .mat-step-icon-content {
  visibility: hidden;
  position: relative;
}

/* 统一设置自定义文本的样式 */
::ng-deep .custom-stepper .mat-horizontal-stepper-header .mat-step-icon-content::after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

/* 为每个步骤设置自定义文本 */
::ng-deep .custom-stepper .mat-horizontal-stepper-header:nth-child(1) .mat-step-icon-content::after {
  content: 'A';
}

::ng-deep .custom-stepper .mat-horizontal-stepper-header:nth-child(2) .mat-step-icon-content::after {
  content: 'B';
}

::ng-deep .custom-stepper .mat-horizontal-stepper-header:nth-child(3) .mat-step-icon-content::after {
  content: 'C';
}

::ng-deep .custom-stepper .mat-horizontal-stepper-header:nth-child(4) .mat-step-icon-content::after {
  content: 'D';
}

方案说明 #

1. 使用visibility: hidden隐藏原有数字，相比display: none能保留元素占位，避免步进器图标布局错乱。
2. 通过绝对定位将自定义文本覆盖在原数字的位置，保证视觉上和原索引位置一致。
3. 用自定义类custom-stepper限定样式作用范围，防止影响项目中其他Mat-Stepper组件。

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