我试图在输入字段上使用：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">
我做错了什么？我应该使用另一个伪选择器吗？
注意：我不能在输入周围添加跨度，因为它是由第三方控件生成的。
当前回答
当我遇到同样的问题时，我发现了这篇文章，这是对我有效的解决方案。与替换输入的值相反，只需删除它并在其后面绝对放置一个大小相同的span，span可以使用您选择的图标字体将：before伪类应用于它。
<style type="text/css">
form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>
<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>
其他回答
：after和：before在Internet Explorer 7及以下版本中不受任何元素的支持。
它也不能用于替换的元素，如表单元素（输入）和图像元素。
换句话说，使用纯CSS是不可能的。
但是，如果使用jquery，则可以使用
$(".mystyle").after("add your smiley here");
之后的API文档
使用javascript附加内容。这将适用于所有浏览器。
总结
它不适用于<inputtype=“button”>，但适用于<输入type=“checkbox”>。
小提琴：http://jsfiddle.net/gb2wY/50/
HTML格式：
<p class="submit">
<input id="submit-button" type="submit" value="Post">
<br><br>
<input id="submit-cb" type="checkbox" checked>
</p>
CSS:
#submit-button::before,
#submit-cb::before {
content: ' ';
background: transparent;
border: 3px solid crimson;
display: inline-block;
width: 100%;
height: 100%;
padding: 0;
margin: -3px -3px;
}
我发现你可以这样做：
.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的位置。
这里有另一种方法（假设您可以控制HTML）：在输入之后添加一个空的<span></span>，并在CSS中使用input.mystyle+span:after将其作为目标
.field包含错误{显示：内联；颜色：红色；}.field_with_errors输入+span：之后{内容：“*”}<div class=“field_with_errors”>标签：</div><div class=“field_with_errors”><input type=“text”/><span></span></div>
我在AngularJS中使用这种方法，因为它会自动将.ng无效类添加到＜input＞表单元素和表单中，但不会添加到＜label＞中。
：before和：after应用于容器内部，这意味着您可以将其用于带有结束标记的元素。
它不适用于自动关闭元件。
另一方面，自动关闭的元素（如img/hr/input）也称为“替换元素”，因为它们被替换为各自的内容。“外部对象”，因为缺少更好的术语。这里读得更好
