Html 正在尝试将星号添加到必需的输入字段

我想我不太明白

：在
之前和
：在
之后，因为我无法让它工作。我只是想在表单中的必填字段后添加一个星号

我的代码很简单：

<input id="name" type="text" required="required" autofocus="" placeholder="Name" autocomplete="off" value="" maxlength="40" class="required" name="name" />

/* Required field */
.required:after {
  content: '*';
  color: #EF5F5F;
}


/*必填字段*/
。所需时间：之后{
内容：“*”；
颜色：#EF5F5F；
}

为什么这不起作用？

我的小提琴在这里：
:after
和
:before
选择器不用于表单元素，例如
输入
，因此不可能用CSS来实现。我建议使用jQuery，或者在元素之后添加另一个
。
您的css试图在
元素中添加*元素，这是不可能的，因为它不能包含任何其他元素

让我们这样说：
：在
之后意味着您的内容将被插入到中，在选择器的末尾，
：在
之前意味着您的内容将被插入到中以及元素的开头

您可以在这里找到一个很好的解释：
生成的内容作为要添加到的项目的子项添加。因此，浏览器正在执行此操作（为了简洁起见，跳过了一些属性）：


*

这是无效的

请看一看，以便更好地理解它（它有关于浏览器如何解释它的示例）。
啊，谢谢您提供的信息。我希望避免使用额外的span标记。
不能这样写。。。它是一个自动关闭标记，如
和

@AhmadAlfy-alesandro只是演示了浏览器如何处理“css生成的代码”。所以这是故意无效的代码。所以没有必要否决投票。@AhmadAlfy我知道，事实上我写的代码是无效的，我只是在解释引擎盖下发生的事情。@AlessandroVendruscolo谢谢你的解释。不过我没有投反对票。
<input class="required">
  <span class="after">*</span>
</input>