Cannot set font density to: after pseudo-element used in <input> elements

Question

So, I have a custom style for the input element, and I want to put the text in the tab with :after .

The problem I am facing is that I cannot change the font-weight in the :after element, this problem only occurs with a combination of input and :after elements.

CSS

 input[type="checkbox"] { /* enable styling of the checkbox ! */ -moz-appearance: none; -webkit-appearance: none; } input { /* set up some basic styles.... */ background-color:#ccc; width:200px; height:200px; background-color:grey; } input:after { /* and we create the :after element */ width:100%; text-align:center; font-weight:100; /* THIS DOESN'T WORK FOR SOME REASON */ content: "This should be thin"; /* some text */ } 

JSFIDDLE

http://jsfiddle.net/xQVfL/1/

FIXED

Chrome for Mac (latest)

Question

Why can't I set the font density in the :after element set in the input element?

Answer 1

An answer was given here. It looks like: after that it was only intended to be added to container tags. Can I use: after a pseudo-element in an input field?