Angular Material 13+ 如何移除必填字段星号前的空格？

在Angular Material v13中，必填表单字段的默认必填星号前会自带一个空格，渲染后的简化HTML结构如下：

<span aria-hidden="true" class="mat-placeholder-required mat-form-field-required-marker"> *</span>

需求是让字段显示为「First name*」而非「First name *」，且因项目规模庞大，无法逐个使用[hideRequiredMarker]="true"手动添加星号，以下是通用解决方案：

通用CSS解决方案 #

将以下样式添加到全局样式文件（如styles.scss），即可全局移除所有必填字段星号前的空格：

.mat-form-field-required-marker {
  /* 隐藏原有带空格的星号内容 */
  visibility: hidden;
  position: relative;
}

.mat-form-field-required-marker::after {
  /* 重新添加不带空格的星号 */
  content: '*';
  visibility: visible;
  position: absolute;
  left: 0;
}

方案说明 #

1. 该方案通过CSS伪元素替换原有带空格的星号内容，无需修改任何组件代码，全局生效
2. 保留了原有的aria-hidden="true"属性，不会影响屏幕阅读器的无障碍访问
3. 星号的样式（如颜色）仍可通过原有CSS规则调整：

.mat-placeholder-required.mat-form-field-required-marker::after {
  color: blue;
}

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