Css 使用pseudo元素使用必需的属性向输入元素添加星号

我想在具有必需属性的输入元素中添加一个星号。并且要在输入中

这就是我想做的

<input type="text" placeholder="name" class="text-input" required>

[required] {
  position: relative;
  color: red;
  padding: 10px;
}

[required]:after {
  position: absolute;
  top: 5px;
  right: 5px;
  color: red;
  content: " *";
  height: 10px;
  width: 10px;  
}

[必需]{
位置：相对位置；
颜色：红色；
填充：10px；
}
[必选]：之后{
位置：绝对位置；
顶部：5px；
右：5px；
颜色：红色；
内容：“*”；
高度：10px；
宽度：10px；
}

我不想添加更多的元素或类，这是可能的

---

---

看起来我不能这样做。

请注意，不能在替换的元素（如表单元素（输入）和图像元素）上使用

：before

和

：after

伪元素

---

您可能希望将输入包装在父元素中，并将

：在

之后

这里有一个添加asterix的示例，但就在输入之后

---

实际上，你不能。该规范称：“该规范没有完全定义：before和：after与替换元素（如HTML中的IMG）的交互。这将在未来的规范中进行更详细的定义。”到目前为止，该规范尚未定义。而

输入

被视为替换的元素。浏览器通常不支持

：after

和

：before

伪元素。如果他们这样做了，生成的内容将被插入到元素内容的末尾或开头，根据HTML规范，内容是空的，因此根本不清楚会发生什么

---

请注意，使用没有关联的

标签的
输入
元素违反了基本的可用性和可访问性准则。特别是，
占位符
属性不是用来代替标签的。
听说我不能，我不想添加更多的元素，或者你可以使用属性占位符，手动编写*是的，现在我知道为什么我不能这样做，希望以后能这样做。谢谢你的留言，我不得不重新考虑这个
<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required:after { content:" *"; }
</style>​

    <input type="text" placeholder="Name *">