为什么 :after 伪元素呈现在子元素而不是选定元素内？ [关闭]答案

【问题标题】：Why is :after pseudo-element rendering inside child element instead of the selected element? [closed]为什么 :after 伪元素呈现在子元素而不是选定元素内？ [关闭]
【发布时间】：2019-04-05 17:08:04
【问题描述】：

我的问题是我的伪元素(: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 之后渲染！

【问题讨论】：

看起来不像 css...但如果是 less 则可能是 &:after {
看来你在使用预处理器，你写的其实是正确的；您的目标是:after 伪元素，它是.ui-accordion 的子元素，它本身是.step__content 的子元素...如果您希望将该元素应用于.step__content，则必须在之后直接声明它它可能还有一个& 符号，因此它针对.step__content 的:after 元素
在 vanilla CSS 中执行此操作时，您的问题是否仍然存在？如果是这样，请共享编译后的 CSS。如果不是，请澄清这仅在 Sass 上
@AlonEitan 不明白为什么，但您的建议无效！ :)
@kontenurban 它之所以有效是因为它创建了以下选择器.step__content div.ui-accordion-header:after 而不是.step__content div.ui-accordion-header :after（注意:after 后面的空格）

标签： css html sass pseudo-element

【解决方案1】：

必须将父级设置为位置：相对？这是绝对定位元素获取其原点引用的地方。

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

【讨论】：

我相信当他说“内部渲染”时，他指的是 DOM/HTML 本身，而不是视觉上。