Can someone explain why a ::before pseudo-element with negative z-index is hidden behind the background of its (parent's) parent even if it doesn't belong to the same stacking context?
* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.background {
background: black;
}
p {
color: white;
display: inline-block;
position: relative;
}
p::before {
content: "";
position: absolute;
width: 100%;
height: 3px;
left: 0;
bottom: 0;
background: red;
z-index: -1;
transition: all 200ms ease-in-out;
}
p:hover::before {
height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="background">
<p>I am a relative positioned element</p>
</div>
</body>
</html>