如何在 jQuery 动态创建的元素上添加 ::before 伪元素答案

【问题标题】：How to add ::before pseudo element on elements created dynamically by jQuery如何在 jQuery 动态创建的元素上添加 ::before 伪元素
【发布时间】：2014-12-22 11:15:49
【问题描述】：

我正在使用 jquery 动态创建一些元素。（比如 id test_element1、test_element2 等等..）

我有以下 CSS -

div[id^=test_]:before  {
    content: "";
    height: 100%;
    width: 100%;
    box-shadow: #aaaaaa 0px 0px 10px inset;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

当我检查元素时，::before 元素没有出现。它仅在我的 HTML 中已经存在 test_element1 时才会显示（即静态内容）。

如何使::before 出现在我的动态元素中？

【问题讨论】：

一个可运行的 sn-p 会很好，拜托。
div 上有 position:relative 吗？ - fiddle?
我无法重现该问题：jsbin.com/vamid/1/watch?css,js,output 我觉得很好。
谢谢哈希姆，你是对的。我的 div 在 iframe 中，因此出现了问题。
请提供一个最小可重复的例子。您可以将您的代码放入 JS fiddle 中以便我们检查您的代码吗？

标签： javascript jquery css

【解决方案1】：

伪元素没有出现真的不应该有任何理由。也许检查您的代码以查看其他地方是否存在问题。这是您尝试实现的工作示例，也许您可以将其与您的代码进行比较，并为您的特定情况找到解决方案。但最终的答案是它应该可以工作，所以问题不在于 css/jquery 关系。

$("body").append(

  $("<div />", {
    "id": "test_element1"
  }).html("test"),

  $("<div />", {
    "id": "test_element2"
  }).html("test"),

  $("<div />", {
    "id": "test_element3"
  }).html("test")

);

div[id^=test_] {
  position: relative;
  padding-top: 1em;
}

div[id^=test_]::before {
  content: "i am pseudo element";
  height: 100%;
  width: 100%;
  box-shadow: #aaaaaa 0px 0px 10px inset;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  display: block;
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

答案是

您不能使用 javascript 或 jquery 操作 :after 和 :before 之类的伪元素。你甚至不能动态添加 then。

【讨论】：

虽然是真的，但它不能回答问题。这是另一个问题的答案。
OP 没有尝试在 JS 中添加伪元素。他正在添加元素本身。 CSS 处理伪类。

【解决方案3】：

设置伪元素时，需要添加选择器z-index + position。

div[id^=test_]  {
    position:relative;
    z-index:1;
}
div[id^=test_]:before  {
    content: "";
    height: 100%;
    width: 100%;
    box-shadow: #aaaaaa 0px 0px 10px inset;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

【讨论】：