pseudo元素没有出现是没有理由的。也许你可以检查一下你的代码，看看是否有其他地方的问题。这里有一个你正在尝试实现的工作示例，也许你可以将其与你的代码进行比较，并找到一个适合你具体情况的解决方案。但最终的答案是它应该工作，所以问题不在于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>

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

这将是你问题的答案。

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属性使用伪属性选择器。
编辑你的代码，让我知道你的想法。我希望这将解决你的问题。

答案是
你不能使用javascript或jquery来操作伪元素：after和：before，甚至不能动态地添加它们。

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

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