imgとかinputなどの置換要素にはbefore, afterは使えないよ

inputにbefore使おうとしてはまったのでメモ。
仕様読めばすぐ解決（できないという意味で）だったんだけど色々試して時間無駄にしてしまった。

12. Replaced content

If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.
To insert text around replaced content, '::outside::before' and '::outside::after' may be used.

http://www.w3.org/TR/css3-content/#replacedContent

replaced elements（置換要素: imgとかinputとかvideoとかそういうやつ）にはbefore, after疑似要素が使えないと言うことらしい。
たしかに、

span:before { content: "before/"; }
span:after  { content: "/after"; }

<span>before/content/after</span>

みたいになるから<img />とか<input />の場合どこにも挿入できない。

<input>の場合は<button>とか使えばいいんだけど、同じソースでガラケー対応している場合は<button>使えないので悩ましいね。