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

Question

I am creating some elements dynamically with jquery. (say with id test_element1 , test_element2 and so on..)

I have the below 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;
}

The ::before element does not show up when I inspect the element. It shows up only if the test_element1 is already present in my HTML (ie. static content).

How do I make the ::before appear for my dynamic elements?

Answer 1

There really should be no reason for the pseudo element not showing up. Maybe check your code to see if there is a problem elsewhere. Here is a working example of what you are trying to achieve, maybe you can compare this with your code and find a solution for your specific case. But the ultimate answer is that it should be working, so the problem is not the css/jquery relationship.

 $("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;
}

This will be the solution to your question.

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>

Please check this code snippet and fix your code accordingly. Here I am generating dynamic button with dynamic id. I have also specified css property using pseudo attribute selector.

Edit your code and let me know your thoughts. I hope this will fix your problem.

Answer 4

When you set pseudo element, selector z-index + position need to added.

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

Answer 5

the answer is that

You can not manipulate the pseudo elements like :after and :before using javascript or jquery. You cannot even add then dynamically.