Question

其中一个＆＃34;不可能＆＃34; CSS时刻...... 我想在视觉上为元素添加厚度。这很容易，之前我已经完成了它并且使用：after伪元素实现了它非常好。该伪元素具有绝对位置。它的父母有相对的位置。一切都很好，除了伪元素没有显示，可能是由于z-index问题。所以我把一个负的z-index放到了伪元素，一个z-index为0给了父，是的，它可以工作......但是内容显示在它的父文本下，而不是背景。怎么可能？！

您可以在此处查看：https://www.fluidtopics.com/find-and-view/ 在页面的最后，有一个紫罗兰按钮＆＃34; Combine and Publish＆＃34;应该有一个厚度。使用＆＃34; a＆＃34;的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，现在我可以看到伪元素。但是我只能在第一级父母没有背景（米色的）时看到它。正在进行中......

Answer 1

伪元素实际上是虚构标签。所以我们需要定义它的显示器＆＃39;明确。没有它，他们就不会工作。所以就把

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

Answer 2

按照以下步骤为您的解决方案。 1.将此文本包装在span标记

中

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

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

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

并从此类.ctabutton::after{}

中删除z-index

position

Answer 3

技术上，：＆amp; ：之前是元素的伪内容，这意味着它们都是元素本身的内容框的一部分。因此，这些伪元素只能与内容框堆叠，而不能在元素外部堆叠。

我们可以为此寻求更好的解决方案，包装文本“Combine＆amp; Publish”＆amp;标记在另一个包装元素中，然后在元素下面定位：

以下是示例代码

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

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

4 个答案: