我试图在输入字段上使用：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">
我做错了什么？我应该使用另一个伪选择器吗？
注意：我不能在输入周围添加跨度，因为它是由第三方控件生成的。
当前回答
：after和：before在Internet Explorer 7及以下版本中不受任何元素的支持。
它也不能用于替换的元素，如表单元素（输入）和图像元素。
换句话说，使用纯CSS是不可能的。
但是，如果使用jquery，则可以使用
$(".mystyle").after("add your smiley here");
之后的API文档
使用javascript附加内容。这将适用于所有浏览器。
其他回答
奇怪的是，它可以处理某些类型的输入。至少在Chrome中，
<input type="checkbox" />
工作正常，与
<input type="radio" />
只是type=text和其他一些不起作用。
：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;
}
根据CSS2.1规范中的注释，该规范“没有完全定义：before和：after与替换元素（如HTML中的IMG）的交互。这将在未来的规范中进行更详细的定义。”尽管input不再是真正的替换元素，基本情况没有改变：：before和：after对它的影响未指明，通常没有影响。
解决方案是找到一种不同的方法来解决您试图以这种方式解决的问题。将生成的内容放入文本输入控件会非常误导：对用户来说，它似乎是控件中初始值的一部分，但无法修改，因此它似乎是在控件开始时强制的，但不会作为表单数据的一部分提交。
下一步尝试：
label[for=“userName”]{位置：相对；}label[for=“userName”]：：之后{content:'[after]'；宽度：22px；高度：22px；显示：内联块；位置：绝对；右：-30像素；}<label for=“userName”>姓名：<input type=“text”name=“userName”id=“userName“></label>
