絕對：在相對父項下不顯示僞元素後

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; }