CSS 变换和伪类

Question

使用 :after，我正在尝试创建野兽派伪 3D 按钮。但是 :after 显示在预期元素上方。

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>

Answer 1

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

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>

Answer 2

您可以使用 box-shadow.

而不是 :after

nav li {
  position: relative; z-index:0;
  display:inline-block;
  transition: background 0.2s;
  transform: skewX(10deg);
  box-shadow: 10px 10px 0 red;
}
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>
  <ul>
    
    <li class="active">
      <a href="#">Products</a>
    </li>
    
  </ul>
</nav>

CSS 变换和伪类

CSS Transform and Pseudo classes

html

css

css-selectors

pseudo-class

CSS 变换和伪 类

CSS Transform and Pseudo classes

html

css

css-selectors

pseudo-class

CSS 变换和伪类