：after和：before在Internet Explorer 7及以下版本中不受任何元素的支持。

它也不能用于替换的元素，如表单元素（输入）和图像元素。

换句话说，使用纯CSS是不可能的。

但是，如果使用jquery，则可以使用

$(".mystyle").after("add your smiley here");

之后的API文档

使用javascript附加内容。这将适用于所有浏览器。

：在容器内渲染之前和之后

＜input＞不能包含其他元素。

伪元素只能在容器元素上定义（或者更好地说，只支持）。因为它们的渲染方式在容器本身作为子元素。输入不能包含其他元素，因此不支持它们。另一方面，也是表单元素的按钮支持它们，因为它是其他子元素的容器。

如果你问我，如果某些浏览器确实在非容器元素上显示了这两个伪元素，那就是一个bug和一个非标准一致性。规范直接涉及元素内容。。。

W3C规范

如果我们仔细阅读规范，它实际上表明它们被插入到包含元素中：

作者使用：before和：after伪元素指定生成内容的样式和位置。正如它们的名称所示，：before和：after伪元素指定元素文档树内容前后的内容位置。“content”属性与这些伪元素一起指定插入的内容。

看见元素的文档树内容。据我理解，这意味着在容器内。

当我遇到同样的问题时，我发现了这篇文章，这是对我有效的解决方案。与替换输入的值相反，只需删除它并在其后面绝对放置一个大小相同的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>

奇怪的是，它可以处理某些类型的输入。至少在Chrome中，

<input type="checkbox" />

工作正常，与

<input type="radio" />

只是type=text和其他一些不起作用。

根据CSS2.1规范中的注释，该规范“没有完全定义：before和：after与替换元素（如HTML中的IMG）的交互。这将在未来的规范中进行更详细的定义。”尽管input不再是真正的替换元素，基本情况没有改变：：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上查看

您不能在输入元素中放置伪元素，但可以放置阴影元素，如占位符！

input[type="text"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

要使其在其他浏览器中工作，请在不同的选择器中使用：-moz占位符、：：-moz placeholder和：-ms input placeholder。无法对选择器进行分组，因为如果浏览器无法识别选择器，则整个语句将无效。

更新：以上代码仅适用于CSS预处理器（SASS、LESS…），不使用预处理器：

input[type="text"]::-webkit-input-placeholder:before { // your code }

我发现你可以这样做：

.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的位置。

您必须在输入周围使用某种包装器，才能使用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;
}

：before和：after应用于容器内部，这意味着您可以将其用于带有结束标记的元素。

它不适用于自动关闭元件。

另一方面，自动关闭的元素（如img/hr/input）也称为“替换元素”，因为它们被替换为各自的内容。“外部对象”，因为缺少更好的术语。这里读得更好

这里有另一种方法（假设您可以控制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来设置输入元素的样式，那么很可能您试图模仿CSS堆栈中其他span、div甚至某个元素的效果。

正如Robert Koritnik的回答所指出的，：before和：after只能应用于容器元素，而输入元素不是容器。

然而，HTML5引入了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>

正如其他人所解释的，输入有点被替换为空元素，所以大多数浏览器不允许您在其中生成：：before或：：after伪元素。

然而，CSS工作组正在考虑在输入具有外观：none的情况下显式允许：：before和：：after。

从…起https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html,

Safari和Chrome都允许在表单输入上使用伪元素。其他浏览器没有。我们曾考虑删除此项，但使用计数器正在记录大约0.07%的使用它的页面，这是我们最大值的20倍移除阈值。实际上，在输入上指定伪元素需要指定输入的内部结构至少在某种程度上，我们没有我不相信我们能做到）。但鲍里斯建议，在其中一个错误线程中，允许它出现：无输入-基本上只是将它们转换为＜div＞s，而不是“有点被替换”的元素。

下一步尝试：

label[for=“userName”]{位置：相对；}label[for=“userName”]：：之后{content:'[after]'；宽度：22px；高度：22px；显示：内联块；位置：绝对；右：-30像素；}<label for=“userName”>姓名：<input type=“text”name=“userName”id=“userName“></label>

总结

它不适用于<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;
}

：before和：after仅适用于可以具有子节点的节点，因为它们将新节点作为第一个或最后一个节点插入。

伪元素如：after、：before仅用于容器元素。在单个位置开始和结束的元素，如＜input/＞、＜img＞等，都不是容器元素，因此不支持伪元素。一旦将伪元素应用于容器元素（如＜div＞），如果检查代码（参见图片），就可以理解我的意思。实际上，伪元素是在容器元素内部创建的。这在＜input＞或＜img＞的情况下是不可能的

这里最大的误解是单词前后的意思。它们不是指元素本身，而是指元素中的内容。因此，元素：before在内容之前，元素：after在内容之后，但两者仍在原始元素内部。

input元素在CSS视图中没有内容，因此没有：before或：after伪内容。这适用于许多其他无效或替换的元素。

元素外部没有引用的伪元素。

在另一个宇宙中，这些伪元素可能被称为其他元素，以使这种区别更清晰。甚至有人提出了一个真正在元素之外的伪元素。到目前为止，在这个宇宙中情况并非如此。

尽管有解释指出Firefox不允许：：after和：：before内容用于无法显示任何内容的元素的行为是正确的，但这一规则似乎仍然适用：

input[type=checkbox] {
    -moz-appearance: initial;
}

由于：：after是重新设置复选框或单选框样式的唯一方法，而不会引入更多无关的标记，如尾随跨度或标签，我认为可以强制Firefox允许显示：：before和：：aft内容，尽管不符合规范。

前后切换开关示例只需将输入包装在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>

问题提到“输入字段”。虽然我相信OP引用的是type=text、：：after和：：before的输入字段，但伪内容确实呈现了几种不同类型的输入字段：

input::before {
    content: "My content" /* 11 different input types will render this */
}    

这里是所有输入类型的全面演示，清楚地显示了哪些类型与（在本例中）：：before伪元素兼容。

总之，这是可以呈现伪内容的所有输入类型的列表：

复选框颜色日期本地日期时间文件形象月无线电广播范围时间周