I am experimenting with using background-clip: text on an element that contains some child <p> elements. I wanted to enhance the design by adding some absolutely positioned :after elements to the <p> tags, covering up the text for animation effects. However, when I applied position: relative to the <p> tags, they mysteriously disappeared. It seems to be related to the interaction between background-clip and color: transparent. Is there a solution to make this work seamlessly?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
body {
flex-direction: column;
}
.container {
background: linear-gradient(to bottom, white, black);
background-clip: text;
-webkit-background-clip: text;
text-align: center;
}
.container p {
font-size: 5em;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
color: transparent;
-webkit-text-fill-color: transparent;
}
.container.relative p {
position: relative;
}
/* .container.relative p:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
} */<p>The text below is set as relative but appears invisible</p>
<div class="container relative">
<p>Some Relative</p>
<p>Text</p>
</div>
<p>The text below is not set as relative and remains visible</p>
<div class="container">
<p>Some</p>
<p>Text</p>
</div>