为什么：after伪元素渲染后子元素而不是所选元素？

Question

我的问题是我的伪元素（：after）在子元素内部而不是在实际元素之后进行渲染！这是有问题的，因为我无法按照我想要的方式放置伪元素！有什么解决办法的想法吗？

      .step__content {
            margin-top: 120px;

            div.ui-accordion-header {
                margin-left: 30px;

                :after {
                    content: '';
                    position: absolute;
                    height: 20px;
                    width: 20px;
                    left: 0;
                    background-image: url('../images/i.svg');
                }
            }
        }

您可以在图像上看到，由于某种原因，它在跨度内呈现！我需要在div之后渲染！

Answer 1

是否必须将父级设置为position：relative？这是绝对定位的元素获得其原点参考的地方。

div.ui-accordion-header {
  position: relative;
  ....
}