Question

我用jquery动态创建一些元素。（例如标识为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

答案是

在使用javascript或jquery之前，你无法操纵像：after和：之类的伪元素。你甚至无法动态添加。

Answer 3

设置伪元素时，需要添加选择器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;
}

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

3 个答案: