CSS伪元素:after与文本省略号共存时星号定位偏移问题求助

现有代码用于在必填表单标签后显示红色星号（*），当标签文本过长显示省略号（ellipsis）时效果正常，但文本较短无需显示省略号时，星号的定位会出现轻微偏移，如何修复？

原代码 #

CSS #

label {
  position: relative;
  display: inline-block;
  max-width: 240px;
}
 
label.required:after {
  content: '*';
  color: red;
  position: absolute;
  right: 0;
}

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

HTML #

<div>
  <label class="required ellipsis">long text works really really very really well</label>
</div>
<div>
  <label class="required ellipsis">short text * positioning is off</label>
</div>

修复方案 #

问题根源：短文本时label宽度由内容决定（小于max-width），伪元素right:0紧贴文本右侧；长文本溢出时label撑满max-width，伪元素在容器最右侧，两者视觉位置不一致。

以下是几种可行的修复方法：

方法一：给标签预留星号位置（推荐） #

给label添加右侧内边距，让伪元素固定在预留区域，无论文本长短，星号位置保持统一：

label {
  position: relative;
  display: inline-block;
  max-width: 240px;
  padding-right: 12px; /* 预留星号的空间，可根据字号调整 */
}
 
label.required:after {
  content: '*';
  color: red;
  position: absolute;
  right: 0;
  top: 0; /* 确保垂直对齐文本 */
}

这种方式不会改变原有布局，文本溢出时省略号会在预留内边距前截断，星号始终在容器右侧，视觉效果统一。

方法二：让星号紧跟文本右侧 #

修改伪元素定位，使其始终紧贴文本末尾，适合需要星号随文本移动的场景：

label.required:after {
  content: '*';
  color: red;
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 3px; /* 可选：调整星号与文本的间距 */
}

注意：文本溢出时星号会超出label容器，需确保父元素允许溢出显示。

方法三：强制标签占满最大宽度 #

如果布局允许，让label始终撑满max-width，伪元素位置自然统一：

label {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 240px;
}

此方法会让短文本的标签也占满240px宽度，需根据实际布局需求选择。

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