Псевдоэлемент с z-индексом: -1 скрыт фоновым цветом

Question

У меня есть класс .link с псевдоэлементом :: after под ним (как box-shadow при наведении).

.bg {
    background-color: aqua;
    height: 100vh;
}

.link {
    position: relative;
    font-weight: bold;
}

.link::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 0 1em #888888 inset;
    opacity: 0;
}

.link:hover::after {
    opacity: 1;
}

<div class="bg">
  <p class="link">Link</p>
</div>

Однако, когда я добавляю цвет фона к охватывающему элементу div, он закрывает тень блока.Я попытался добавить

position: absolute;
z-index: -2;

к div, но это вызывает проблему изменения размера с div, хотя наложение правильное.Интересно, есть ли предпочтительный метод для размещения псевдоэлемента над слоем bg, но за исходным классом ссылок?Спасибо!

Answer 1

Добавьте z-index:0 (или любое значение) к элементу фона, чтобы создать стековый контент и избежать перемещения псевдоэлемента:

.bg {
    background-color: aqua;
    height: 100vh;
    position:relative;
    z-index:0; /* added */
}

.link {
    position: relative;
    font-weight: bold;
}

.link::after {
    content: '';
    position: absolute;
    z-index: -999; /*you can put any negative value now*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 0 1em #888888 inset;
    opacity: 0;
}

.link:hover::after {
    opacity: 1;
}

<div class="bg">
  <p class="link">Link</p>
</div>

Похожие: Почему элементы с любым значением z-index никогда не могут покрыть его дочерний элемент?