Chrisstar Chrisstar - 5 months ago 14
CSS Question

Pseudo element overlaps child element

Fiddle! CSS:

.wrapper {
justify-content: center;
display: flex;
background: black;
}
.outer {
text-decoration: none;
display: inline-block;
position: relative;
background: #555;
}
.outer::before {
display: block;
content: "";
position: absolute;
top: 0;
width: 100%;
height: 5px;
background: orange;
transition: all 0.3s;
}
.outer:hover::before {
height: 100%;
}
.inner {
display: inline-block;
color: white;
padding: 20px;
}


HTML:

<div class="wrapper">
<a class="outer" href="#">
<span class="inner">
Hover
</span>
</a>
</div>


If you look at the fiddle and hover over the box, you'll see that the ::before pseudo element overlaps the text. I researched for half an hour but didnt find an answer. I'd appreciate if you can give me some help on how I can make the element dont overlop the text.
I can use data attributes.

Answer

Try adding position: relative to the CSS rules for .inner.

.inner {
    display: inline-block;
    position: relative;
    color: white;
    padding: 20px;
}

I forked your Fiddle here!

I believe what's happening is that the position: absolute on .outer::before is putting it in a new stacking context, and span.inner is stuck in another stacking context below. Adding position: relative to .inner brings your text into a whole new stacking context above everything else.