使用 CSS 将“*”添加到具有“required”属性的输入字段的标签

Question

label我想知道当标签的for属性用于具有inputhtml属性的元素时，是否有一种方法仅使用 CSS 向元素添加星号required。label或者，如果后面紧跟着一个input具有该属性的元素，我们可以使用逻辑required。

有效的方法是这样的：

input[required] + label:after {
  content: '*';
  color: red;
}

<form>
  <div>
    <input for="name" type="text" required />
    <label id="name">Name</label>
  </div>
  <div>
    <input for="age" type="text" />
    <label id="age">Age</label>
  </div>
</form>

但我所说的是如果label和input被交换，如下例所示，这是更常见的。CSS 同级选择器+不适用于这种情况。label当元素是第一个而第二个元素时，有什么方法可以做类似上面的事情吗input？

/* ??? */

<form>
  <div>
    <label for="name">Name</label>
    <input id="name" type="text" required />
  </div>
  <div>
    <label for="age">Age</label>
    <input id="age" type="text" />
  </div>
</form>

谢谢

Answer 1

我建议你保留旧的 html 并使用 css flex 来排序位置

input[required] + label:after {
	content: '*';
	color: red;
  }
  div {
	  display: flex;
	  text-align: center;
	  align-items: flex-start;
  }
  div input {
    width: 100px;
    height: 20px;
	order: 2;
  }
  div label {
    width: 100px;
    height: 20px;
	order: 1;
  }

<form>
        <div>
          <input for="name" type="text" required />
          <label id="name">Name</label>
        </div>
        <div>
          <input for="age" type="text" />
          <label id="age">Age</label>
        </div>
      </form>

请参阅代码笔