html - CSS转换和伪类

使用：之后，我试图创建野蛮人伪3D按钮。
但是：后面显示的是上面的预定元素。
What I'm Trying to accomplish
What I'm getting
编辑：很明显，这种转变正在阻碍，研究还没有给出原因或找到解决办法。
我错过了什么？还是有更好的办法？

nav li {
  position: relative;
  display:inline-block;
  transition: background 0.2s;
  transform: skewX(10deg);
}
nav li a {
  display:block;
  text-decoration:none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  color: #0bf;
}
nav li.active,
nav li:hover{
  background:#000;
}

nav li.active:after {
  content: "";
  display: inline-block;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  background-color: red;

  position: absolute;
  z-index: -1;
}

<nav>
  <ul>

    <li class="active">
      <a href="#">Products</a>
    </li>

  </ul>
</nav>

最佳答案

瞧。。。刚刚编辑了这部分：

nav li.active,
nav li:hover{
  background:#000;
}

... 应该是：

nav li.active a,
nav li:hover a{
  background:#000;
}

以下是工作代码：

nav li {
  position: relative;
  display:inline-block;
  transition: background 0.2s;
  transform: skewX(10deg);
}
nav li a {
  display:block;
  text-decoration:none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  color: #0bf;
}
nav li.active a,
nav li:hover a{
  background:#000;
}

nav li.active:after {
  content: "";
  display: inline-block;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  background-color: red;

  position: fixed;
  z-index: -1;
}

<nav>
  <ul>

    <li class="active">
      <a href="#">Products</a>
    </li>

  </ul>
</nav>

关于html - CSS转换和伪类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47211683/