:: przed pseudoelementem o ujemnym indeksie z nie wyświetlającym się za rodzicem

Question

Przysięgam, robiłem to setki razy, ale nie wiem, dlaczego moje tło :before pseudoelementu jest wyświetlanie za tekstem, ale nie za tłem kotwicy. Myśli?

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

Próbka tutaj: http://jsfiddle.net/cfree/hnKLr/

Answer 1

Po dodaniu wartości z-index do elementu, należy utworzyć nowy kontekst stosu. Każde dziecko tego elementu będzie się na nim układać.

Jeśli chcesz umieścić element za rodzicem, po prostu nie twórz kontekstu stosu na rodzica. Nadal musisz używać ujemnego indeksu z, ponieważ domyślny poziom stosu rodzica będzie wynosił 0 (niezależnie od kontekstu elementu)

Answer 2

W ::before i ::after pseudo-elementy są nazywane nieco myląco - zachowują się tak, jakby byli dziećmi dopasowanego elementu, a nie jego rodzeństwo.

W tym konkretnym przypadku wydaje się, że box-shadow byłoby najwłaściwsze:

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

Is this the effect you were looking for?