Is there a way to add an asterisk mark to the placeholder of inputs, similar to this image: https://i.sstatic.net/N6ND0.png
I've scoured the internet but haven't been able to find a solution that works.
My current approach:
Currently, I'm attempting to add it using the after pseudo-element, but it's not showing up.
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 don't want to directly insert the symbol into the placeholder text. Instead, I would like to style the symbol differently (for example, blue color while keeping the rest of the text grey).
If anyone can assist me in adding an asterisk to the placeholder, I'd greatly appreciate it.