我可以在输入字段上使用 :before 或 :after 伪元素吗？

:before 和 :after 在容器内渲染

并且 不能包含其他元素。

伪元素只能在容器元素上定义（或者说只支持）。因为它们的呈现方式是 within 容器本身作为子元素。 input 不能包含其他元素，因此不受支持。另一方面，也是表单元素的 button 支持它们，因为它是其他子元素的容器。

如果你问我，如果某些浏览器确实在非容器元素上显示这两个伪元素，那是一个错误和非标准一致性。规范直接谈到元素内容...

W3C 规范

如果我们仔细阅读 the specification，它实际上是说它们被插入 inside 一个包含元素：

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

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

---

Internet Explorer 7 及更低版本的任何元素均不支持 :after 和 :before。

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

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

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

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

API docs on .after

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

---

奇怪的是，它适用于某些类型的输入。至少在 Chrome 中，

<input type="checkbox" />

工作正常，与

<input type="radio" />

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

---

Here's another approach（假设您可以控制 HTML）：在输入之后添加一个空的 <span></span>，并使用 input.mystyle + span:after 在 CSS 中定位它

.field_with_errors { 显示：内联；红色; } .field_with_errors input+span:after { content: "*" }

我在 AngularJS 中使用这种方法，因为它会自动将 .ng-invalid 类添加到 <input> 表单元素和表单，但不会添加到 <label>。

---

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

它不适用于自闭合元素。

附带说明一下，自动关闭的元素（例如 img/hr/input）也称为“替换元素”，因为它们被各自的内容替换。 “外部对象”缺乏更好的术语。更好的阅读here

---

我使用 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
}

View on Codepen

---

:after、:before 等伪元素仅适用于容器元素。像 <input/>、<img> 等在一个地方开始和结束的元素不是容器元素，因此不支持伪元素。一旦您将伪元素应用于 <div> 之类的容器元素，并且如果您检查代码（见图），您就会明白我的意思。实际上，伪元素是在容器元素内创建的。在 <input> 或 <img> 的情况下这是不可能的

https://i.stack.imgur.com/1yUox.png

---

这里最大的误解是before和after这两个词的含义。它们不是引用元素本身，而是引用元素中的内容。所以 element:before 在内容之前，而 element:after 在内容之后，但两者仍然在原始元素内。

input 元素在 CSS 视图中没有内容，因此没有 :before 或 :after 伪内容。许多其他无效或替换元素也是如此。

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

在不同的宇宙中，这些伪元素可能被称为其他东西以使这种区别更加清晰。甚至可能有人提出了一个真正在元素之外的伪元素。到目前为止，在这个宇宙中还不是这样。

---

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

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 }

---

纯 CSS 中的工作解决方案：

诀窍是假设在文本字段之后有一个 dom 元素。

/* * 诀窍就在这里：* 这个选择器说“在 * 输入文本 (+) 之后获取第一个 dom 元素，并将其之前的内容设置为 * 值 (:before)。*/ input#myTextField + *:before { content: "👍"; }

(*) 有限的解决方案，但是：

您必须希望有以下 dom 元素，

您必须希望没有其他输入字段跟随您的输入字段。

但在大多数情况下，我们知道我们的代码，所以这个解决方案看起来很高效，100% CSS 和 0% jQuery。

---

我发现这篇文章是因为我遇到了同样的问题，这是对我有用的解决方案。与替换输入的值相反，只需将其删除并在其后面绝对放置一个相同大小的跨度，跨度可以使用您选择的图标字体应用 :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>

---

根据 CSS 2.1 规范中的 note，该规范“没有完全定义 :before 和 :after 与替换元素（例如 HTML 中的 IMG）的交互。这将在未来的规范中更详细地定义。”虽然input不再是真正的替换元素，但基本情况并没有改变：:before和:after对其的影响是未指定的，一般是没有影响的。

解决方案是找到一种不同的方法来解决您试图以这种方式解决的问题。将生成的内容放入文本输入控件会非常误导：对用户来说，它似乎是控件中初始值的一部分，但它不能被修改——所以它似乎是在开始时强制执行的。控制，但它不会作为表单数据的一部分提交。

---

正如其他人解释的那样，input 有点被替换为 void 元素，因此大多数浏览器不允许您在其中生成 ::before 或 ::after 伪元素。

但是，CSS 工作组正在考虑明确允许 ::before 和 ::after，以防 input 具有 appearance: none。

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

Safari 和 Chrome 都允许在其表单输入中使用伪元素。其他浏览器没有。我们考虑删除它，但使用计数器记录了使用它的页面的约 0.07%，这是我们最大删除阈值的 20 倍。实际上在输入上指定伪元素至少需要在某种程度上指定输入的内部结构，我们还没有设法做到（而且我不相信我们*可以*做到）。但鲍里斯建议，在其中一个错误线程中，允许它出现在外观：无输入 - 基本上只是将它们变成