0
リスト要素（またはこれらのリスト要素内のアンカータグ）にカーソルを置いたときに、トランジションエフェクトを作成します。擬似要素::兄弟要素のコンテンツを非表示にする前に
残念ながら、作成したトランジション:: :: before擬似要素（または:: after、私はわからない）は、技術的に兄弟のコンテンツであるアンカータグ内のテキストを隠しています。
ul、liのz-indexと無駄なタグを操作しようとしました。この問題は私のポジションの中にある可能性があります。私のトランジションでは絶対的ですが、私が間違っていることは分かりません。
はここで、その後a後ろしかしの上にそれをプッシュする疑似要素にz-index: -1を使用し、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のスニペットを使用することをおすすめします。 *（JSFiddleのような外部リソースではない）* – Santi