我试图在输入字段上使用：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对它的影响未指明，通常没有影响。
解决方案是找到一种不同的方法来解决您试图以这种方式解决的问题。将生成的内容放入文本输入控件会非常误导：对用户来说，它似乎是控件中初始值的一部分，但无法修改，因此它似乎是在控件开始时强制的，但不会作为表单数据的一部分提交。
其他回答
当我遇到同样的问题时，我发现了这篇文章，这是对我有效的解决方案。与替换输入的值相反，只需删除它并在其后面绝对放置一个大小相同的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>
您必须在输入周围使用某种包装器，才能使用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;
}
尽管有解释指出Firefox不允许：：after和：：before内容用于无法显示任何内容的元素的行为是正确的，但这一规则似乎仍然适用：
input[type=checkbox] {
-moz-appearance: initial;
}
由于：：after是重新设置复选框或单选框样式的唯一方法，而不会引入更多无关的标记，如尾随跨度或标签，我认为可以强制Firefox允许显示：：before和：：aft内容，尽管不符合规范。
这里最大的误解是单词前后的意思。它们不是指元素本身，而是指元素中的内容。因此，元素：before在内容之前，元素：after在内容之后，但两者仍在原始元素内部。
input元素在CSS视图中没有内容，因此没有：before或：after伪内容。这适用于许多其他无效或替换的元素。
元素外部没有引用的伪元素。
在另一个宇宙中，这些伪元素可能被称为其他元素，以使这种区别更清晰。甚至有人提出了一个真正在元素之外的伪元素。到目前为止，在这个宇宙中情况并非如此。
我使用背景图像为必填字段创建了红点。
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上查看
