我正在尝试:after在input字段上使用CSS伪元素，但是它不起作用。如果我将其与一起使用span，则可以正常运行。
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>这有效（在“ buu！”之后和“更多”之前放入笑脸）
<span class="mystyle">buuu!</span>a some more这是行不通的-它只将someValue涂成红色，但没有笑脸。
<input class="mystyle" type="text" value="someValue">我究竟做错了什么？我应该使用另一个伪选择器吗？
注意：我无法在span周围添加input，因为它是由第三方控件生成的。
Answers:
:after并且:before在Internet Explorer 7及更高版本中的任何元素上均不受支持。
它还不打算用于替换的元素，例如表单元素（输入）和图像元素。
换句话说，使用纯CSS 是不可能的。
但是，如果使用jQuery，则可以使用
$(".mystyle").after("add your smiley here");用javascript附加内容。这将适用于所有浏览器。
:after一般，虽然它不支持任何:before或:after上输入。
:after和:before伪元素，它们只能放在容器元素上。为什么？因为它们附加在该特定元素内。input不是容器。button例如，因此您可以戴上它们。可以正常工作。规范实际上说：元素的文档树内容之前和之后它明确表示CONTENT。因此，元素必须是容器。
:before并:after在容器内渲染和<input>不能包含其他元素。
伪元素只能在容器元素上定义（或者最好仅支持）。因为它们的呈现方式在容器本身内作为子元素。input不能包含其他元素，因此不受支持。甲button在另一方面这也是一个表格元件支持它们，因为它的其他子元素的容器。
如果您问我，是否某个浏览器确实在非容器元素上显示了这两个伪元素，那是一个错误，并且是非标准的一致性。规范直接讨论元素的内容...
如果我们仔细阅读说明书，它实际上说，他们被插入内含有元素：
作者使用：before和：after伪元素指定生成内容的样式和位置。顾名思义，：before和：after伪元素指定元素在文档树内容之前和之后的位置。“ content”属性与这些伪元素一起指定了要插入的内容。
看到？元素的文档树内容。据我了解，这意味着在容器内。
[required]::before { content "*"; color: red; }：P
<input type="submit" value="Send"/>，请<button type="submit">Send</button>改用。表示是相同的，但是<button>是一个容器，因此支持:before和:after。
p和标签h1，内容在标签内，因此之前/之后也将出现在标签内。使用input和元素时hr，：before和：after仍会出现在内容之前或之后，但不涉及容器（尤其是for input）。input：checked：before广泛用于指示通过CSS选中的复选框。
这是另一种方法（假设您可以控制HTML）：<span></span>在输入之后添加一个空白，然后使用input.mystyle + span:after
.field_with_errors {
display: inline;
color: red;
}
.field_with_errors input+span:after {
content: "*"
}<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" /><span></span>
</div>我在AngularJS中使用这种方法，因为它将.ng-invalid自动将类添加到<input>表单元素和表单中，而不是添加到中<label>。
input:hover+span:after{color: blue}。赞成。
我使用background-image来为必填字段创建红点。
input[type="text"][required] {
background-image: radial-gradient(red 15%, transparent 16%);
background-size: 1em 1em;
background-position: top right;
background-repeat: no-repeat
}您不能在输入元素中放置伪元素，但可以像占位符一样放置阴影元素！
input[type="text"] {
&::-webkit-input-placeholder {
&:before {
// your code
}
}
}要使其在其他浏览器中运行，请使用:-moz-placeholder，::-moz-placeholder并:-ms-input-placeholder 在其他选择器中使用。无法对选择器进行分组，因为如果浏览器无法识别选择器，则会使整个语句无效。
更新：上面的代码仅适用于CSS预处理器（SASS，LESS ...），而无需使用预处理器：
input[type="text"]::-webkit-input-placeholder:before { // your code }glyphicon-search未触摸的标记，那就是UX问题。
伪元素（如:after）:before仅用于容器元素。开始和在像一个单一的地方封闭元件<input/>，<img>等不是容器元素，因此伪构件不被支持。将伪元素应用于容器元素后<div>，如果您检查代码（参见图片），就可以理解我的意思。实际上，伪元素是在容器元素内部创建的。在<input>或的情况下这是不可能的<img>
纯CSS的可行解决方案：
诀窍是假设文本字段后有一个dom元素。
/*
* The trick is here:
* this selector says "take the first dom element after
* the input text (+) and set its before content to the
* value (:before).
*/
input#myTextField + *:before {
content: "👍";
} <input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
There's maybe something after a input-text
Does'nt matter what it is (*), I use it.
-->
<span></span>（*）解决方案有限，但：
但是在大多数情况下，我们知道我们的代码，因此该解决方案似乎很有效，并且CSS的使用率为100％，jQuery的使用率为0％。
input#myTextField ~ span:before {要好得多，但跨度应该有一类真正更明确像.tick或者.icon
我发现这个帖子的原因是我遇到了同样的问题，这是对我有用的解决方案。与其替换输入值，不如将其删除并在其后绝对放置一个相同大小的跨度，跨度可以使用: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。它们不是指元素本身，而是指元素中的内容。所以，element:before是之前的内容，并且element:after是内容之后，但两者仍然是原来的元素中。
该input元素在CSS视图中没有内容，因此也没有:before或:after伪内容。许多其他void或替换元素也是如此。
没有伪元素引用元素外部。
在不同的宇宙中，这些伪元素可能被称为其他名称，以使这种区分更加清晰。甚至有人可能提出了一个伪元素，而该伪元素确实在元素之外。到目前为止，在这个宇宙中情况并非如此。
hr从CSS的角度看，一直以来都是模棱两可的，尽管您在讨论颜色时看到的更多。
根据CSS 2.1规范中的注释，该规范“并未完全定义：before和：after与替换元素（例如HTML中的IMG）的交互。这将在以后的规范中更详细地定义。” 虽然input不是真正的替换元素更多，基本态势没有改变：效果:before和:after未指定就可以了，一般没有影响。
解决方案是找到一种不同的方法来解决您要解决的问题。将生成的内容放入文本输入控件中会产生很大的误导性：对用户而言，它似乎是控件中初始值的一部分，但无法修改-因此，它看起来像是在控件开始时被强制执行的操作控件，但它不会作为表单数据的一部分提交。
input。
正如其他人所解释的那样，inputs是有点替换的void元素，因此大多数浏览器都不允许您在其中生成::before或::after伪元素。
然而，CSS工作组正在考虑明确允许::before和::after万一input有appearance: none。
从https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html，
Safari和Chrome都允许在表单输入中使用伪元素。其他浏览器则没有。我们曾考虑删除它，但是使用计数器正在记录使用它的〜.07％的页面，这是我们最大删除阈值的20倍。
实际上，在输入上指定伪元素将需要至少指定输入的内部结构，而我们尚未设法做到这一点（我不确定我们可以做到）。但是鲍里斯（Boris）在其中一个bug线程中建议，允许它出现：无输入-基本上只是将它们转换为<div>，而不是“ kinda替换”元素。
尝试下一个：
label[for="userName"] {
position: relative;
}
label[for="userName"]::after {
content: '[after]';
width: 22px;
height: 22px;
display: inline-block;
position: absolute;
right: -30px;
}<label for="userName">
Name:
<input type="text" name="userName" id="userName">
</label>您必须在输入周围有某种包装，才能使用伪元素之前或之后。这是一个小提琴，它在输入的包装div上具有一个before，然后将其放置在输入中-至少看起来像这样。显然，这是一种变通方法，但在紧要关头很有效，因此很容易响应。如果您需要添加其他内容，则可以轻松地进行设置。
工作小提琴
输入中的美元符号作为伪元素：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;
}如果尝试使用：before和：after设置输入元素的样式，则很可能是在模仿CSS堆栈中其他span，div或什至是元素的效果。
正如罗伯特·科里特尼克（Robert Koritnik）的答案所指出的那样，：before和：after只能应用于容器元素，而输入元素则不是容器。
但是，HTML 5引入了button元素，它是一个容器，其行为类似于input [type =“ submit | reset”]元素。
<style>
.happy:after { content:url(smiley.gif); }
</style>
<form>
<!-- won't work -->
<input class="happy" type="submit" value="Submit" />
<!-- works -->
<button class="happy">Submit</button>
</form>摘要
它不能使用<input type="button">，但可以使用<input 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;
}
border-color的input吧。我发现这更引人注意。