So, i've got a custom style on an input element, and I want to place some text on the input with the use of :after
.
The problem i'm running into is that i cannot seem to change the font-weight on the :after
element, this problem only occurs with the 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
TESTED ON
Chrome for mac (latest)
QUESTION
Why can't I set font-weight on the :after
element set on an input
element?