0
我想在悬停在我的列表元素（或者我的锚点标签在这些列表元素中）时创建一个过渡效果。伪元素::隐藏同胞元素的内容之前
不幸的是，当我使用我创建的transition :: :: before伪元素（或者:: after，我不确定）隐藏技术上它的同级内容是什么，那是锚标签中的文本。
我试着在ul，li和一个标签上操作z-index无济于事。这个问题可能出现在我对位置的使用中：绝对在我的转换中，但我无法知道我做错了什么。
这里的HTML和CSS和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>
什么是您所希望达到的过渡？ – Ryan
@Ryan OP的转换是在链接悬停时隐藏链接文本。 – disinfor
该问题的可重复片段应该出现在问题本身*中。请修改您的问题以包含复制问题所需的所有代码，最好是作为可运行的SO-snippet。 *（不是像JSFiddle这样的外部资源）* – Santi