html - 无法在 :after 使用的伪元素上设置字体粗细元素

Question

所以，我在输入元素上有一个自定义样式，我想在输入上放置一些文本，使用:after.

我遇到的问题是我似乎无法更改:after元素的字体粗细，这个问题只发生在input和:after元素的组合中。

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/

经测试

Mac 版 Chrome（最新）

问题

为什么我不能在:after元素上设置的input元素上设置字体粗细？

Answer 1

这是在这里回答的。似乎 :after 仅用于附加到容器标签。我可以在输入字段上使用 :after 伪元素吗？