How to get asterisk in placeholder with css
<p>I want to add an asterisk mark to placeholder of inputs. Something like this:
<a href="https://i.stack.imgur.com/N6ND0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N6ND0.png" alt="enter image description here" /></a></p>
<p>I have searched internet but could not find a working solution.</p>
<p><strong>My current approach:</strong></p>
<p>Currently I am trying to add it in the after pseudo element but that is not appearing.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    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;
    } </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" name="your-name" placeholder="Naam"&gt;</code></pre>
</div>
</div>
</p>
<p>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).</p>
<p>So, if anyone can help me add an asterisk to the placeholder.</p>
<p><strong><a href="https://jsfiddle.net/KiranKumarDash/987tybdg/1/" rel="nofollow noreferrer">JSFIDDLE</a></strong></p>