定位：链接

Question

我想知道是否可以定位a：after-pseudo元素的z-index，以便它位于链接文本的后面。例如;

HTML

<a href="#">Here's a link</a>

SCSS

a {
    background: #666:
    height: 40px;
    padding: 0px 20px;
    position: relative;
    color: #FFF;

    &:before {
        /* this is occupied */
    }

    &:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        top: 0; left: 0;
        background: #000;
    }
}

我在这里尝试实现的是显示链接的文字。目前没有发生这种情况，因为:after元素与它重叠。我想在不使用<span>标记之类的情况下将文字放在前面。注意：它应该与原始背景重叠，但不应与文本重叠。

有没有办法实现这一目标，还是这根本不可能？

Answer 1

我找到了一个合适的解决方案。我会在元素上使用box-shadow: inset 0 -3.125rem 0 #000;。这样我就不必使用:after元素。

谢谢大家的评论。

Answer 2

就像为z-index: -1;伪元素设置:after一样简单。

&:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0; 
    left: 0; 
    z-index: -1; /* Set this */
    background: #000;
}

这是一个JSFiddle：https://jsfiddle.net/thepio/tm9n0x5g/1/

修改

根据你的评论，你可以使用一个技巧，但我不知道它是否会随你的动画一起出现。您可以在HTML本身中使用title属性，并将其用作:after伪元素的内容。

＆＃13;

＆＃13;

a {
  position: relative;
  background: #666;
  height: 40px;
  padding: 0px 20px;
  position: relative;
  color: #FFF;
  z-index: 1;
}
a:after {
  content: attr(title);
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  background: #000;
  color: white;
  text-align: center;
}

＆＃13;

<a href="#" title="Here's a link">Here's a link</a>

＆＃13;

＆＃13;

＆＃13;

然后你可以淡入淡出或者你喜欢的任何东西。

这是一个新的JSFiddle：https://jsfiddle.net/thepio/tm9n0x5g/1/

Answer 3

您只需将z-index:-1;添加到:after - 伪

即可

a {
    background: #666:
    height: 40px;
    padding: 0px 20px;
    position: relative;
    color: #FFF;
}

a:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 0; left: 0;
  background: #000;
  z-index:-1;
}

<a href="#">Here's a link</a>

https://jsfiddle.net/d8htv6a9/