::負のZ-インデックスを持つ疑似要素が親の後ろに表示されない

Question

私はこれを100回実行したことを誓っていますが、私の人生ではなぜ私の: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/

Answer 1

あなたが要素にz-index値を追加すると、あなたは新しいスタッキングコンテキストを作成します。その要素のすべての子要素がその要素の上に積み重なります。

したがって、親の後ろに要素を配置する場合は、親にスタッキングコンテキストを作成しないでください。親のデフォルトのスタックレベルが0（何らかの文脈で要素がある）であるので、負のZ-インデックスを使用する必要があります。

Answer 2

::beforeと::after擬似要素は、ビット紛らわしい命名されている - 彼らはマッチした要素ではなく、その兄弟の子であるかのように彼らが振る舞います。この特定のケースで

box-shadowが最も適切であろうように、それはそうです：

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

Is this the effect you were looking for?