Adding <sup> asterisk to placeholder, or a nice way to mark required fields via placeholder

css, html, placeholder

Solution

`:after` works but you need to target the placeholder and not the input element...and then you can use `position: absolute;` and `top, left` properties to move your `*` anywhere you want to...

Demo (Am not sure about other syntax but I've tested on webkit as am using firefox < 17 so if something is failing in any browser please let me know)

HTML

<input type="text" placeholder="E-Mail" />

CSS

::-webkit-input-placeholder:after {
   content: '*';
}

:-moz-placeholder:after { /* Firefox 18- */
   content: '*'; 
}

::-moz-placeholder:after {  /* Firefox 19+ */
   content: '*';
}

:-ms-input-placeholder:after {  
   content: '*';
}

Problem

I'm looking for a way to style the asterisk in the placeholder. Plain text like this in placeholder does not satisfy me: Your e-mail* Note that the placeholder text is variable, so static background will not play the trick

Original source