如何用css在占位符中获取星号

Question

我想在输入的占位符中添加星号标记。像这样的东西：

我搜索了互联网，但找不到合适的解决方案。

HTML：

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

我目前的做法：

目前我正在尝试将其添加到after伪元素中但不会出现。

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;
} 

我不想直接在占位符中添加符号。但是会以任何其他方式喜欢它，这会让我以不同的方式设置符号的样式。（比方说我想要蓝色代表我的符号，但其余的文字是灰色的）。

所以，如果有人可以帮我添加星号到占位符。

JSFIDDLE

Answer 1

为什么不简单地在占位符属性中使用*？

.asterisk::-webkit-input-placeholder {
    color:    #f00;
}
.asterisk:-moz-placeholder {
   color:    #f00;
   opacity:  1;
}
.asterisk::-moz-placeholder {
   color:    #f00;
   opacity:  1;
}
.asterisk:-ms-input-placeholder {
   color:    #f00;
}

<input type="text" name="your_name" placeholder="*" class="asterisk" />

EndNote：您不能在replaced html elements

中使用伪元素

根据您的评论，您还可以使用必需属性，然后将它们设置为：

<input type="text" name="your_name" placeholder="*" required />
[required]::-webkit-input-placeholder {
    color:    #f00;
}

根据您的下一个评论要求，您需要在下面的范围中包含需要星号的输入：

.input-group{
  position: relative;
}
.input-group::after{
  content: '*';
  position: absolute;
  top: 3px;
  left: 46px;
  color: #f00
}

<span class="input-group">
  <input type="text" name="your_name" placeholder="Naam" />
</span>