title: How to get asterisk in placeholder with css
body: <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>