css - 绝对 :after pseudo-element not displaying under relative parent

Question

这是这些“不可能”的 CSS 时刻之一......我想在视觉上为元素添加厚度。这很简单，我以前做过，使用 :after 伪元素就可以很好地实现它。这个伪元素有一个绝对位置。它的 parent 有一个相对的位置。一切都很好，除了伪元素没有显示，可能是由于 z-index 问题。所以我把一个负的 z-index 给伪元素，一个 0 的 z-index 给父元素，是的，它有效......但内容显示在其父元素的文本下，而不是背景。怎么可能？!

您可以在这里查看:https://www.fluidtopics.com/find-and-view/在页面的末尾，有一个紫色按钮“组合并发布”，它应该有一个厚度。使用“a”元素的 z-index，您就会明白我的意思。

工作示例:http://jsfiddle.net/sugardaddy/vq2x2uue/

HTML

<a href="#" class="ctabutton ctabutton-primary ctabutton-standard "><i class="ft-webicons-coffee"></i>Read Jane’s story</a>

CSS

.ctabutton-primary::after {
    background-color: #521a4a;
}
.ctabutton::after {
    border-radius: 0.4em;
    bottom: -3px;
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}
.ctabutton-primary, .ctabutton-primary:hover {
    background-color: #852a79;
    color: #ffbb1a !important;
}
.ctabutton, .newsform .mktoForm .mktoButtonWrap.mktoRound .mktoButton {
    border-radius: 0.3em;
    display: inline-block;
    font-weight: 400;
    padding: 0.5em 1em;
    position: relative;
    transition: all 200ms ease-in-out 0s;
    vertical-align: middle;
}

感谢您的帮助!

编辑:经过一些调查，为伪元素设置负 z-index 使其消失，但仅在页面的那部分消失。检查菜单内的按钮......它就像一个魅力。所以我认为这是由于父元素的规则，但我不知道是哪个规则，也不知道是什么规则。

编辑 2:现在我真的认为这是由于嵌套的相关元素造成的。在每一层，我都添加了一个 z-index:inherit，现在我可以看到伪元素了。但我只能在一级 parent 没有背景(米色)时才能看到它。进行中...

Answer 1

伪元素其实就是虚构的标签。所以我们需要明确定义它的“显示”。没有它，它们就无法工作。所以就把

    .ctabutton::after, .ctabutton-primary::after {
        display:block;
    }