绝对：在相对父项下不显示伪元素后

Question

这是“不可能”的CSS时刻之一... 我想在视觉上为元素添加厚度。这很简单，我之前就已经完成了，并且使用伪元素之后的效果非常好。 这个伪元素有一个绝对位置。它的父母有一个相对的位置。 一切都很好，除了伪元素没有显示，可能是由于z-index问题。所以我把一个负Z指标给伪元素和一个Z指数为0的父指标，是的它的工作原理...但内容显示在其父母的文本下，而不是背景。怎么可能？！

您可以在这里查看：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指数的伪元素使它消失，但只在页面的那一部分。检查菜单中的按钮......它像一个魅力。所以我认为这是由于对父元素的规则，但我不知道哪一条或什么规则。编辑2：现在我真的认为这是由于嵌套的相对元素。在每个级别，我添加一个z-index:inherit，现在我可以看到伪元素。但是我只能在一级父母没有背景时才能看到它（米色）。进行中...

Answer 1

按照下面提到的步骤解决您的问题。 1.将此文本包裹在span标记内

<span class="cmbSpan">Combine & Publish</span> 

并在样式表中添加以下样式。

.cmbSpan, .ft-webicons-sources{ 
    z-index: 999; 
    position: inherit; 
} 

和除去z索引形式该类.ctabutton::after{}

Fiddle

Answer 2

技术上，：&后：前是一个元素伪含量，这意味着它们两者是内容的一部分中一个元素本身。因此，这些伪元素只能与内容框叠加，而不能叠加在元素外。

我们可以为此寻求更好的解决方案，将文本“合并&发布”&标签放在另一个包装元素中，然后放置在元素下方。

下面是示例代码，

.ctabutton::after { 
 
    bottom: -3px; 
 
    content: ""; 
 
    height: 20px; 
 
    left: 0px; 
 
    position: absolute; 
 
    width: 100%; 
 
    border-radius: 0.4em; 
 
} 
 
.cont { 
 
    position: relative; 
 
    z-index: 1; 
 
}

<a class="ctabutton ctabutton-primary ctabutton-standard " href="/combine-and-publish/"> 
 
    <span class="cont"> <i class="ft-webicons-sources"></i>Combine &amp; Publish </span> 
 
</a>

Answer 3

伪元件实际上是虚标签。所以我们需要明确定义它的'显示'。没有这些，他们不工作。所以，只要把

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

Answer 4

嗯，我实现它与我的DOM的一些修改，从这里的一些答案的建议。 我在“按钮”的内容上使用了一个范围，并将所有属性都视为虚拟元素。

HTML

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

CSS

.ctabutton, 
.newsform .mktoForm .mktoButtonWrap.mktoRound .mktoButton { 
    border-radius: 0.3em; 
    font-weight: 400; 
    display: inline-block; 
    vertical-align: middle; 
    position: relative; 
    -webkit-transition: all 200ms ease-in-out; 
    -moz-transition: all 200ms ease-in-out; 
    transition: all 200ms ease-in-out; 
} 
.ctabutton span { 
    display: block; 
    padding: 0.5em 1em; 
    border-radius: 0.3em; 
    position: relative; 
    z-index: 1; 
} 

.ctabutton::after { 
    bottom: -3px; 
    content: ""; 
    height: 20px; 
    left: 0px; 
    position: absolute; 
    width: 100%; 
    border-radius: 0.4em; 
} 

.ctabutton-primary span, 
.ctabutton-primary:hover span { 
    background-color: #852a79; 
    color: #ffbb1a !important; 
} 

.ctabutton-primary::after { background-color: #521a4a; }