6

我发誓我已经这样做了一百次，但是对于我的生活，我无法弄清楚为什么我的:before伪元素的背景显示在文本后面而不是锚点的背景后面。想法？

.button {
    background: tomato;
    padding: 10px 30px;
    margin: 20px 0;
    display: inline-block;
}

.button:hover {
    margin: 18px 0 22px 2px;
    position: relative;
    z-index: 2;
}

.button:hover:after {
    position: absolute;
    background: red;
    top:-2px;
    left: -2px;
    content: "";
    z-index: -10;
    width: 100%;
    height: 100%;
}

<a class="button" href="#">Meow</a>

示例：http: //jsfiddle.net/cfree/hnKLr/

4

2 回答 2

12

向元素添加z-index值时，会创建一个新的堆叠上下文。该元素的每个子元素都将堆叠在它上面。

所以当你想把一个元素放在它的父元素后面时，不要在父元素上创建一个堆叠上下文。不过，您仍然需要使用负 z-index，因为父级的默认堆栈级别将是0（在元素的任何上下文中）

于 2013-11-09T23:22:00.453 回答
2

::before和伪元素的::after命名有点混乱——它们表现得好像它们是匹配元素的子元素，而不是它的兄弟元素。

在这种特殊情况下，似乎 abox-shadow最合适：

.button:hover {
    box-shadow: -2px -2px 0 red;
}

这是你想要的效果吗？

于 2013-11-09T22:45:58.353 回答