title: 2 colors in one placeholder of input field
body: <p>I need create input which has 2 colors in a placeholder.</p>
  
  <p>and here is solution which works well in Chrome. </p>
  
  <p><a href="http://jsfiddle.net/vmuJm/" rel="noreferrer">http://jsfiddle.net/vmuJm/</a></p>
  
  <h1>html</h1>
  
  <pre><code>&lt;input placeholder="Name" class="required" /&gt;
  </code></pre>
  
  <h1>css</h1>
  
  <pre><code>.required::-webkit-input-placeholder:after {
      content:'*';
      color: red;
  }
  .required:-moz-placeholder:after {
      /* Firefox 18- */
      content:'*';
      color: red;
  }
  .required::-moz-placeholder:after {
      /* Firefox 19+ */
      content:'*';
      color: red;
  }
  .required:-ms-input-placeholder:after {
      content:'*';
      color: red;
  }
  </code></pre>
  
  <p>But my current FF 29.0.1 doesn't show content from :after, so this solution doesn't work. Is there any other way to get 2 colors in one placeholder with css and html?</p>
  
  <h1>Chrome:</h1>
  
  <p><img src="https://i.stack.imgur.com/BO4yr.png" alt="https://lh5.googleusercontent.com/-NN7pPNg49D8/U5DUKMAIJhI/AAAAAAAAzAg/LqltLDSNgD4/s0/2014-06-05_22-33-08.png"></p>
  
  <h1>FF:</h1>
  
  <p><img src="https://i.stack.imgur.com/3zVpV.png" alt="enter image description here"></p>