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

Question

我正在使用 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

元素未显示。仅当

test_element1

已存在于我的 HTML（即静态内容）中时，它才会显示。

如何让

::before

出现在我的动态元素中？

Answer 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

div[id^=test_] {
    position: relative;
}
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;
}

这将是您问题的解决方案。

Answer 3

var count = 0;
var interval = setInterval(function(){
    if(count < 5){
      let btn = document.createElement('button');
      let len = document.querySelectorAll('button').length;
      btn.classList.add('text_'+ parseInt(len + 1));
      btn.innerText = 'Button ' + parseInt(len + 1);
      document.body.appendChild(btn);
      count+=1;
    }else{
      clearInterval(interval)
    }
 }, 5000)

button{
  position:relative;
  display:block;
  padding:10px;
  background: dodgerblue;
  color:#fff;
  margin-bottom:10px;
  border: none;
  border-radius:5px;
}
button[class^="text_"]:before{
  content: 'Before';
  position:absolute;
  left: 100%;
  height:30px;
  padding: 0 10px;
  border-radius: 50%;
  color: #000;
}

<button class="text_1">Button 1</button>

请检查此代码片段并相应地修复您的代码。在这里，我生成带有动态 id 的动态按钮。我还使用伪属性选择器指定了 css 属性。

编辑您的代码并让我知道您的想法。我希望这能解决您的问题。

Answer 4

您可以使用 ^（胡萝卜）运算符来匹配 id 属性以给定值开始的元素。

[id^="test_element"] {
  color: red;
}

<div id="test_element1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

<div id="test_element2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

<p id="test_element3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<div id="some_id">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

Answer 5

答案是

您无法使用 javascript 或 jquery 操作 :after 和 :before 等伪元素。您甚至无法动态添加。

Answer 6

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

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;
}