jquery - 为什么我在浏览器 Firefox 中的占位符后没有红星？

Question

我想在占位符后面放一颗红星。 Chrome 和 Safari 都可以，但不适用于 Firefox。 我做的是

input::-webkit-input-placeholder:after {  content: "*";
    color: red; }
input::-moz-placeholder:after {  content: "*";
    color: red; }
input:-ms-input-placeholder:after {  content: "*";
    color: red; }

在 CSS 中

<div class="form-group">
    <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Email" >
</div>

在 HTML 中。 为什么在 FIrefox 中 Email 之后没有任何内容。

Answer 1

问题是::after pseudo 仅适用于 Chrome 中的 -input-placeholder(或 -placeholder)。注意这个 fiddle ，

input::-moz-placeholder {
    color: red;
}

input:-ms-input-placeholder {
    color: red;
}

分别在 Firefox 和 IE 中工作，但不工作

input::-moz-placeholder:after {
    content: "*";
    color: red;
}

或

input:-ms-input-placeholder:after {
    content: "*";
    color: red;
}

jsFiddle