title: CSS pseudo-element input-placeholder::after to show with or without value in text box
body: <p>I'm trying to get some UI flagging on form elements for the user after validation to work using the placeholder pseudo elements (starting with text boxes). What I want is the <code>::input-placeholder::after</code> pseudo element to be shown when there is both a value in the text box as well as when there isn't a value in the text box (e.g. when an invalid value is present or when a value is required - should show the red "X" in the far right of the textbox via the <code>::input-placeholder::after</code> pseudo-element).</p>
  
  <p>Here's the fiddle:
  <a href="https://jsfiddle.net/edsinek/L8u7s25d/" rel="nofollow">https://jsfiddle.net/edsinek/L8u7s25d/</a></p>
  
  <p>Here's a snippet of the CSS I'm using to show the "X" for an invalid value:</p>
  
  <pre><code>.input-invalid input[type=text]::-webkit-input-placeholder::after {
    content: "\2716"; // "X"
    font-size: 18px;
    color: #ff0000;
    padding-right: 0;
    float: right;
  }
  </code></pre>
  
  <p>Note: I'm only coding for Chrome at the moment, so forgive the webkit specific stuff.</p>
  
  <p>Any ideas? Or is this something that is not possible and is UA dependent?</p>