Html 如何使用css获取占位符中的星号

我想在输入的占位符中添加一个星号标记。大概是这样的：

我在网上搜索过，但找不到有效的解决方案

Html:

我不想直接在占位符中添加符号。但我会喜欢它的任何其他方式，这将让我的风格符号不同。（说我想要我的符号蓝色，但其余的文字灰色）

所以，如果有人能帮我在占位符上加一个星号

---

为什么不在占位符属性本身中使用*呢

.asterisk:：-webkit输入占位符{
颜色：#f00；
}
.asterisk:-moz占位符{
颜色：#f00；
不透明度：1；
}
.asterisk:：-moz占位符{
颜色：#f00；
不透明度：1；
}
.asterisk:-ms输入占位符{
颜色：#f00；
}

---

@BhojendraNepal，但这不允许我设计它的样式。假设我想给星号符号添加不同的颜色。星号符号将保留在标签中，以显示必填字段，而不是占位符。Yes@Shashank。但我的客户也希望我将其添加到占位符中。所以，如果可以的话，我正在寻找一种方法。@BhojendraNepal。你能告诉我怎么做吗？我已经为你回答了。但这会增加整个占位符的颜色。我想要的是：只有占位符中的星号符号是灰色的，而占位符中的其他文本是红色的。哦，对不起。你误会我了。见我的问题。在我的占位符中有“Naam”，但它应该显示“Naam*”，带有红色的星号。

<input type="text" name="your-name" placeholder="Naam">

input[type=text]::-webkit-input-placeholder:after {
   content: '*';
   color: red; vertical-align: top; font-size: 10px;
}

input[type=text]:-moz-placeholder:after { /* Firefox 18- */
   content: '*'; 
   color: red; vertical-align: top; font-size: 10px;
}

input[type=text]::-moz-placeholder:after {  /* Firefox 19+ */
   content: '*';
   color: red; vertical-align: top; font-size: 10px;
}

input[type=text]:-ms-input-placeholder:after {  
   content: '*';
   color: red; vertical-align: top; font-size: 10px;
}