I am working on a problem regarding a .link class with an ::after pseudo element positioned underneath it to create a box-shadow effect upon hover.
.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>However, I encountered an issue when trying to add a background color to the containing div element as it covers up the box-shadow. I attempted to resolve this by adding
position: absolute;
z-index: -2;
to the div, but this resulted in a resizing problem with the div while maintaining correct stacking order. I am seeking advice on how to properly place a pseudo-element above the background layer but behind the original link class. Any suggestions are greatly appreciated. Thank you!