如何让:after伪元素生成的必填星号始终紧邻label文本？

给必填项的label通过:after伪元素添加星号时，如果label内部包含图标和tooltip组件，星号会跑到这些组件的后面，怎么实现星号始终紧跟label的文本内容？

当前代码：

.required:after {
  content: '*';
}

<label for="input-required" class="required">
  Label
  <span class="tooltip">
    <i class="icon icon-info"></i>
    <span class="message top">Message</span>
  </span>
</label>

方案一：给label文本单独套元素（推荐） #

把label里的纯文本用一个内联标签包起来，比如<span>，然后给这个标签添加:after伪元素，这样星号就只会跟在文本后面：

修改后的HTML：

<label for="input-required" class="required">
  <span class="label-text">Label</span>
  <span class="tooltip">
    <i class="icon icon-info"></i>
    <span class="message top">Message</span>
  </span>
</label>

对应的CSS：

.required .label-text:after {
  content: '*';
  color: red; /* 可选，加红色更醒目 */
  margin-left: 3px; /* 可选，调整星号和文本的间距 */
}

方案二：用浮动调整tooltip位置（无需改HTML） #

如果没法改动HTML结构，可以把tooltip设置为右浮动，这样文本和星号会自然排在前面，tooltip被推到右侧：

.required:after {
  content: '*';
  color: red;
  margin-left: 3px;
}

.required .tooltip {
  float: right;
  margin-left: 10px; /* 可选，调整tooltip和文本的距离 */
}

注意：这种方法要确保label的布局空间足够，避免tooltip换行或挤压文本，适合简单布局的场景。

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