CSS伪元素:after与overflow:hidden冲突，如何保留星号实现文本省略？

现有初始代码：

label.required:after {
  content: ' *';
  color: red;
}

<label class="required">please enter your username</label>

想要为过长标签添加text-overflow: ellipsis截断效果，添加后的代码如下：

label {
  display: inline-block;
  max-width: 150px;
}

label.required:after {
  content: ' *';
  color: red;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<label class="required ellipsis">please enter your username</label>

但出现问题：:after伪元素会被一起截断，星号无法显示。期望实现效果：

please enter your us... *

可以通过将标签文本与伪元素分离容器的方式实现，下面提供两种可行方案：

方案1：内部span包裹文本 + 宽度预留 #

修改后的HTML结构 #

<label class="required">
  <span class="ellipsis">please enter your username</span>
</label>

对应CSS代码 #

label {
  display: inline-block;
  max-width: 150px;
}

label.required:after {
  content: ' *';
  color: red;
}

.ellipsis {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 20px); /* 为星号预留足够空间，避免挤压 */
}

原理：将文本单独放在span中并应用截断样式，:after伪元素挂载在外部label上，不会被截断；通过calc计算span的最大宽度，为星号预留显示空间。

方案2：Flex布局（更灵活） #

修改后的HTML结构 #

<label class="required">
  <span class="ellipsis">please enter your username</span>
</label>

对应CSS代码 #

label {
  display: inline-flex;
  max-width: 150px;
  align-items: center;
}

label.required:after {
  content: ' *';
  color: red;
  flex-shrink: 0; /* 禁止星号被压缩 */
  margin-left: 4px;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; /* 让文本容器占满剩余空间 */
}

原理：利用flex布局的特性，让文本容器span占满label的剩余空间并实现截断，星号设置flex-shrink: 0保证不会被压缩或截断，始终显示在文本右侧。

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