Pseudo Element ::before Hiding Sibling Element's Content
Question
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>
1 answers
solution1
3 ACCPTED 2017-07-06 17:36:56
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.