我试图在输入字段上使用：after CSS伪元素，但它不起作用。如果我将其与跨度一起使用，它可以正常工作。
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
这是有效的（将笑脸放在“buu！”之后，然后放在“somemore”之前）
<span class="mystyle">buuu!</span>a some more
这不起作用-它只将someValue涂成红色，但没有笑脸。
<input class="mystyle" type="text" value="someValue">
我做错了什么？我应该使用另一个伪选择器吗？
注意：我不能在输入周围添加跨度，因为它是由第三方控件生成的。
当前回答
根据CSS2.1规范中的注释，该规范“没有完全定义：before和：after与替换元素（如HTML中的IMG）的交互。这将在未来的规范中进行更详细的定义。”尽管input不再是真正的替换元素，基本情况没有改变：：before和：after对它的影响未指明，通常没有影响。
解决方案是找到一种不同的方法来解决您试图以这种方式解决的问题。将生成的内容放入文本输入控件会非常误导：对用户来说，它似乎是控件中初始值的一部分，但无法修改，因此它似乎是在控件开始时强制的，但不会作为表单数据的一部分提交。
其他回答
正如其他人所解释的，输入有点被替换为空元素，所以大多数浏览器不允许您在其中生成：：before或：：after伪元素。
然而，CSS工作组正在考虑在输入具有外观：none的情况下显式允许：：before和：：after。
从…起https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html,
Safari和Chrome都允许在表单输入上使用伪元素。其他浏览器没有。我们曾考虑删除此项，但使用计数器正在记录大约0.07%的使用它的页面，这是我们最大值的20倍移除阈值。实际上，在输入上指定伪元素需要指定输入的内部结构至少在某种程度上，我们没有我不相信我们能做到）。但鲍里斯建议，在其中一个错误线程中，允许它出现：无输入-基本上只是将它们转换为＜div＞s，而不是“有点被替换”的元素。
我发现你可以这样做：
.submit.btn输入{填充：11px 28px 12px 14px；背景：#004990；边框：无；颜色：#fff；}.提交.btn{边框：无；颜色：#fff；font-family:'Open Sans'，Sans-serif；字体大小：1em；最小宽度：96px；显示：内联块；位置：相对；}.submit.btn:之后{内容：“>”；宽度：6px；高度：17px；位置：绝对；右：36px；颜色：#fff；顶部：7px；}<div class=“submit”><div class=“btn”><input value=“发送”type=“提交”/></div></div>
您需要有一个div父级，它接受padding和：after。第一个父级需要是相对的，第二个div应该是绝对的，这样就可以设置after的位置。
奇怪的是，它可以处理某些类型的输入。至少在Chrome中，
<input type="checkbox" />
工作正常，与
<input type="radio" />
只是type=text和其他一些不起作用。
伪元素如：after、：before仅用于容器元素。在单个位置开始和结束的元素，如＜input/＞、＜img＞等，都不是容器元素，因此不支持伪元素。一旦将伪元素应用于容器元素（如＜div＞），如果检查代码（参见图片），就可以理解我的意思。实际上，伪元素是在容器元素内部创建的。这在＜input＞或＜img＞的情况下是不可能的
您必须在输入周围使用某种包装器，才能使用before或after伪元素。这是一个fiddle，它在输入的包装器div上有一个before，然后将before放在输入内部-或者至少看起来像它。显然，这是一种变通方法，但在紧要关头很有效，并且有助于做出响应。如果你需要放一些其他内容，你可以很容易地让它成为一个after。
工作Fiddle
输入内的美元符号作为伪元素：http://jsfiddle.net/kapunahele/ose4r8uj/1/
HTML：
<div class="test">
<input type="text"></input>
</div>
CSS：
input {
margin: 3em;
padding-left: 2em;
padding-top: 1em;
padding-bottom: 1em;
width:20%;
}
.test {
position: relative;
background-color: #dedede;
display: inline;
}
.test:before {
content: '$';
position: absolute;
top: 0;
left: 40px;
z-index: 1;
}
