6

私はこれを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/

4

2 に答える 2

12

要素に値を追加するz-indexと、新しいスタッキング コンテキストが作成されます。その要素のすべての子は、その上にスタックされます。

そのため、要素をその親の背後に配置する場合は、親にスタック コンテキストを作成しないでください。0ただし、親のデフォルトのスタックレベルは(要素がどのようなコンテキストでも) になるため、負の z-index を使用する必要があります。

于 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 に答える