Menu
I want to create a transition effect when hovering over my list element (or alternatively my anchor tags within these list elements).
Unfortunately, when I use my created transition the ::before pseudo-element (or the ::after, I'm not sure) are hiding what is technically its sibling content, that being the text within the anchor tags.
I've tried manipulating the z-index on the ul, li and a tags to no avail. The problem likely lies within my use of position: absolute in my transitions but I can't tell what I'm doing wrong.
Here's the HTML and CSS and a JSFiddle link
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#headercontainer {
background-color: #4f2f65;
height: 125px;
position: relative;
}
#headercontainer ul {
height: 100%;
display: table;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
#sitelogo {
padding-top: 0px;
}
#headercontainer ul li {
display: table-cell;
vertical-align: middle;
position: relative;
}
#headercontainer ul li a {
color: #fff;
font-size: 20px;
text-decoration: none;
}
a::before {
content: '';
display: block;
height: 0px;
background-color: #fff;
position: absolute;
bottom: 0;
width: 100%;
transition: all ease-in-out 200ms;
}
a:hover::before {
height: 125px;
}
header::after {
content: '';
display: table;
clear: both;
}
#headerlinkslist a:hover {
color: red;
}
.headerlinks {
padding-left: 80px;
padding-right: 80px;
}<body>
<header>
<div id="headercontainer">
<ul id="headerlinkslist">
<li id="sitelogo"></li>
<li><a href="" class="headerlinks">RULES</a></li>
<li><a href="" class="headerlinks">NEWS</a></li>
<li><a href="" class="headerlinks">STATS</a></li>
<li><a href="" class="headerlinks">SUBMIT</a></li>
<li><a href="" class="headerlinks">LOGIN / REGISTER</a></li>
</div>
</header>
</body>
735
asked Mar 07 '26 13:03
give the parent li a z-index, then use z-index: -1 on the pseudo element to push it behind the a but on top of the li.
You also need to close your ul
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#headercontainer {
background-color: #4f2f65;
height: 125px;
position: relative;
}
#headercontainer ul {
height: 100%;
display: table;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
#sitelogo {
padding-top: 0px;
}
#headercontainer ul li {
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 1;
}
#headercontainer ul li a {
color: #fff;
font-size: 20px;
text-decoration: none;
transition: color .25s;
}
a::before {
content: '';
display: block;
height: 0px;
background-color: #fff;
position: absolute;
bottom: 0;
width: 100%;
transition: all ease-in-out 200ms;
z-index: -1;
}
a:hover::before {
height: 125px;
}
header::after {
content: '';
display: table;
clear: both;
}
#headerlinkslist a:hover {
color: red;
}
.headerlinks {
padding-left: 80px;
padding-right: 80px;
}<body>
<header>
<div id="headercontainer">
<ul id="headerlinkslist">
<li id="sitelogo"></li>
<li><a href="" class="headerlinks">RULES</a></li>
<li><a href="" class="headerlinks">NEWS</a></li>
<li><a href="" class="headerlinks">STATS</a></li>
<li><a href="" class="headerlinks">SUBMIT</a></li>
<li><a href="" class="headerlinks">LOGIN / REGISTER</a></li>
</ul>
</div>
</header>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
