我试图在输入字段上使用：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">
我做错了什么？我应该使用另一个伪选择器吗？
注意：我不能在输入周围添加跨度，因为它是由第三方控件生成的。
当前回答
前后切换开关示例只需将输入包装在div块上
.fm表单控件{位置：相对；页边空白：25px；边距底部：25.2px；}.fm切换器{显示：无；}.fm切换开关：选中+.fm占位符切换开关：在之后{背景色：#94c6e7；}.fm切换器：已选中+.fm占位符切换器{左：24px；}.fm切换器[已禁用]+.fm占位符切换器{游标：不允许；}.fm切换器[已禁用]+.fm占位符切换器：之前{背景色：#cbd0d3；}.fm切换器[已禁用]+.fm占位符切换器：之后{背景色：#eaeeded；边框颜色：#cbd0d3；}.fm占位符切换器{左填充：53px；光标：指针；线条高度：24px；}.fm占位符切换器：之前{位置：绝对；内容：“”；左：0；顶部：50%；宽度：20px；高度：20px；页边空白：-10px；左边距：2px；背景色：#2980b9；z指数：2；-moz转换：所有0.15s都易于进出；-o型转换：所有0.15s都易于进出；-webkit转换：所有0.15s都易于输入输出；过渡：所有0.15s均缓进缓出；边框半径：12px；}.fm占位符切换器：在之后{位置：绝对；内容：“”；左：0；顶部：50%；宽度：48px；高度：20px；页边空白：-12px；背景色：#ffffff；z指数：1；边框半径：12px；边框：2px实心#bdc3c7；-moz转换：所有0.15s都易于进出；-o型转换：所有0.15s都易于进出；-webkit转换：所有0.15s都易于输入输出；过渡：所有0.15s均缓进缓出；}<div class='fm表单控件'>＜input class＝‘m-switcher‘id＝‘switcher_id‘type＝‘checkbox‘＞<label class='m-placeholder-switcher'for='switcher_id'>切换器</label></div>
其他回答
：after和：before在Internet Explorer 7及以下版本中不受任何元素的支持。
它也不能用于替换的元素，如表单元素（输入）和图像元素。
换句话说，使用纯CSS是不可能的。
但是，如果使用jquery，则可以使用
$(".mystyle").after("add your smiley here");
之后的API文档
使用javascript附加内容。这将适用于所有浏览器。
下一步尝试：
label[for=“userName”]{位置：相对；}label[for=“userName”]：：之后{content:'[after]'；宽度：22px；高度：22px；显示：内联块；位置：绝对；右：-30像素；}<label for=“userName”>姓名：<input type=“text”name=“userName”id=“userName“></label>
正如其他人所解释的，输入有点被替换为空元素，所以大多数浏览器不允许您在其中生成：：before或：：after伪元素。
然而，CSS工作组正在考虑在输入具有外观：none的情况下显式允许：：before和：：after。
从…起https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html,
Safari和Chrome都允许在表单输入上使用伪元素。其他浏览器没有。我们曾考虑删除此项，但使用计数器正在记录大约0.07%的使用它的页面，这是我们最大值的20倍移除阈值。实际上，在输入上指定伪元素需要指定输入的内部结构至少在某种程度上，我们没有我不相信我们能做到）。但鲍里斯建议，在其中一个错误线程中，允许它出现：无输入-基本上只是将它们转换为＜div＞s，而不是“有点被替换”的元素。
我使用背景图像为必填字段创建了红点。
input[type="text"][required] {
background-image: radial-gradient(red 15%, transparent 16%);
background-size: 1em 1em;
background-position: top right;
background-repeat: no-repeat
}
在Codepen上查看
我发现你可以这样做：
.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的位置。
