嘿，我完全懂你的需求——既要让标签和输入框各占一行，又要在必填项的标签文本末尾加个醒目的红色星号，而且CMS生成的代码里只有input的required="required"属性能用来识别必填项，确实有点绕。

先说说你之前的问题：你用了input[required] + p::before来生成星号，还通过绝对定位把它挪到前面，这就导致星号跑到标签文本的左侧了，而且绝对定位的元素脱离了文档流，一旦标签文本长度变化，星号的位置很容易跑偏，维护起来也麻烦。咱们换个更靠谱的思路：

方案一：用CSS :has()伪类（推荐，现代浏览器支持） #

现在主流浏览器已经全面支持:has()伪类了，它能帮我们选中包含特定子元素的父容器，完美解决咱们没法直接从input反向选择前面label的问题。

直接用下面的CSS代码就能搞定：

/* 保持标签为块级元素，确保和输入框自动分两行显示 */
label {
  display: block;
}

/* 给包含必填input的字段容器里的标签添加红色星号 */
.sf-fieldWrp:has(input[required]) label::after {
  content: "*";
  color: red;
  margin-left: 4px; /* 可以根据需求调整星号和标签文本的间距 */
  font-size: 1.1rem;
}

这样星号会直接跟在标签文本的后面，而且因为label是块级元素，输入框会自动换行到下一行，完全符合你的布局要求。

方案二：JavaScript兼容方案（针对不支持:has()的旧版浏览器） #

如果你需要兼容一些比较老的浏览器（比如旧版Chrome、Firefox），可以用JS来手动给必填项标签添加星号：

// 遍历所有带required属性的输入框
document.querySelectorAll('input[required="required"]').forEach(input => {
  // 找到当前输入框所在的字段容器里的label
  const fieldWrap = input.closest('.sf-fieldWrp');
  const label = fieldWrap ? fieldWrap.querySelector('label') : null;
  
  if (label) {
    // 创建星号元素
    const asterisk = document.createElement('span');
    asterisk.textContent = '*';
    asterisk.style.color = 'red';
    asterisk.style.marginLeft = '4px';
    asterisk.style.fontSize = '1.1rem';
    // 把星号插到标签的末尾
    label.appendChild(asterisk);
  }
});

这段代码会自动遍历所有必填项，找到对应的标签并插入红色星号，布局上也能保持标签和输入框分两行显示。

备注：内容来源于stack exchange，提问作者hnnnng