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 ?

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 ?

• javascript
• jquery
• css

• A runnable snippet would be nice, please. – idmean Commented Oct 27, 2014 at 9:53
• Do you have position:relative on the div? - fiddle? – Vucko Commented Oct 27, 2014 at 9:55
• 6 I couldn't reproduce the problem: jsbin./vamid/1/watch?css,js,output It seems fine to me. – Hashem Qolami Commented Oct 27, 2014 at 9:56
• Thanks Hashim, you are right. My div was in an iframe, hence the issue. – Patrick Commented Oct 29, 2014 at 13:30
• Please provide a minimum reproducible example. Can you put your code into a JS fiddle so we can inspect your code? – Benjamin James Kippax Commented Nov 16, 2019 at 0:14

6 Answers 6

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

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 pare 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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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.

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.

You can use the ^ (carrot) operator to match the elements that start with given value for the id attribute.

$(document).ready(function() {
  var elements = $('.container').children();
  elements.each(function(index) {
    var count = index + 1;
    $(this).attr("id", "test_element" + count);
  });
});

* {
  font-family: Arial, Helvetica, sans-serif;
}

[id^="test_element"] {
  margin-bottom: 1rem;
  padding: 20px;
  position: relative;
}

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

<script src="https://code.jquery./jquery-3.7.1.min.js"></script>

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

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

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

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

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

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.