伪元素 ::before 隐藏同级元素的内容答案

【问题标题】：Pseudo Element ::before Hiding Sibling Element's Content伪元素 ::before 隐藏同级元素的内容
【发布时间】：2017-07-06 17:15:16
【问题描述】：

我想在将鼠标悬停在列表元素（或者这些列表元素中的锚标记）上时创建过渡效果。

不幸的是，当我使用我创建的过渡时，::before 伪元素（或 ::after，我不确定）在技术上隐藏了它的同级内容，即锚标记中的文本。

我尝试在 ul、li 和 a 标签上操作 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 OP 的过渡在链接悬停时隐藏链接文本。
问题的可重现 sn-p 应该存在于问题本身中。请编辑您的问题以包含复制问题所需的所有代码，最好作为可运行的 SO-sn-p。 （不是像 JSFiddle 这样的外部资源）
是否有可能在锚标签内添加一个额外的元素（即跨度标签）？

标签： html css pseudo-element

【解决方案1】：

给父 li 一个 z-index，然后在伪元素上使用 z-index: -1 将其推到 a 后面但在 li 之上。

您还需要关闭您的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>

【讨论】：

不错的优雅解决方案。干得好，伙计。我也会为锚标签的颜色参数添加一个过渡（不过只是个人意见）。
@MichaelCoker 非常感谢，我非常感谢这样一个清晰简洁的答案。 :) 问题：为什么我必须给我的 li 元素一个 z-index 0？默认情况下不应该是 0 吗？我将锚标签的颜色参数更改为与背景相同的紫色，忘记提及了。
@TTBDV 不客气 :) 当您将元素设置为 z-index: -1 时，它将位于所有未声明 z-index 的元素后面。所以尝试从li 中删除z-index。您会看到悬停效果在您的标题容器下方。为避免这种情况发生，您需要在#headercontainer、#headerlinkslist 或li 中添加z-index。