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

【问题标题】：Why I don't have a red star after placeholder in browser Firefox?为什么我在浏览器 Firefox 中的占位符后没有红星？
【发布时间】：2016-06-17 16:36:27
【问题描述】：

我想在占位符后面放一个红星。 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 后面什么都没有。

【问题讨论】：

链接中的内容是：::-webkit-input-placeholder:after { content: "*";红色;不是：input::-webkit-input-placeholder:在我不熟悉css中的“::”语法之后，但如果你只是按照示例进行操作，它可能会起作用。
@sscotti，他们是一样的
现在我发现chrome和safari都很好。只是chrome有问题。
不确定您是否在 mozilla 中得到了答案。如果没有，这可能会有所帮助：link，来自另一个堆栈溢出帖子。

标签： jquery html css

【解决方案1】：

问题是 ::after 伪仅适用于 Chrome 中的 -input-placeholder（或 -placeholder）。注意这个小提琴，

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

【讨论】：

是的，就是这个原因。

【解决方案2】：

您给出的小提琴示例有：

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

你在 :: 之前有输入？

【讨论】：

现在我发现chrome和safari都很好。只是chrome有问题。
可以看看这个。 link，一定有解决办法。
我不确定该功能是否得到普遍支持（即 mozilla）。不确定您是否可以在一个声明中指定 2 个伪元素。似乎还有 2 个伪类，可能没有 2 个伪元素。必须研究一下。
也可以阅读link
这可能适用于堆栈溢出，link，另见下文。