How to get asterisk in placeholder with css - html

Question

I want to add an asterisk mark to placeholder of inputs. Something like this:
I have searched internet but could not find a working solution.
My current approach:
Currently I am trying to add it in the after pseudo element but that is not appearing.
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;
}
<input type="text" name="your-name" placeholder="Naam">
I do not want to add the symbol directly in the placeholder. But would love it in any other way that will let me style the symbol differently.( say I want blue color for my symbol but rest of the text in grey).
So, if anyone can help me add an asterisk to the placeholder.
JSFIDDLE

Answer 1

Why don't you simply use * in placeholder attribute itself?
.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: You can't use pseudo elements in replaced html elements
As per your comment you can also use required attribute and then style them like this:
<input type="text" name="your_name" placeholder="*" required />
[required]::-webkit-input-placeholder {
color: #f00;
}
As per your next comment requirement, you need to wrap your input which needs asterisks in a span like below:
.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>