CSS pseudo-element input-placeholder::after to show with or without value in text box
<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>