如何始终将伪元素置于label的第一个子元素之后而非末尾？

你的问题根源在于当前CSS是给.required元素本身添加伪元素，这会让星号出整个label内容的末尾（也就是tooltip图标后面）。要让星号固定在第一个子元素（文本容器）后面，需要调整选择器，精准定位到label的第一个直接子元素。

方案一：精准定位第一个直接子元素 #

修改CSS选择器，针对.required下的第一个直接子元素设置伪元素：

label.required > :first-child:after {
  content: '*';
  color: @link-blue;
  margin-left: 4px;
}

• > 确保选中label的直接子元素，避免影响嵌套更深的元素
• :first-child 精准定位到第一个子元素（也就是包裹文本的span），伪元素会紧跟在文本后面

方案二：适配不同类型的第一个子元素 #

如果label的第一个子元素可能是不同标签（比如直接文本、div等），可以用:first-of-type增强兼容性：

label.required > :first-of-type:after {
  content: '*';
  color: @link-blue;
  margin-left: 4px;
}

原代码问题说明 #

你原来的代码中：

• &.required:after 是给label元素本身加伪元素，伪元素会插入到label所有内容之后，自然跑到tooltip图标后面
• 嵌套的&:first-child:after写法错误，最终会解析成.required:after:first-child:after，完全不符合预期，没有实际作用

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