使用 :after,我尝试创建野兽派伪 3D 按钮。 但是 :after 显示在预期元素之上。
编辑:显然,这种转变正在阻碍,研究尚未得出原因或找到解决方法。
我错过了什么?或者有更好的办法吗?
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>
最佳答案
您可以使用 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>
关于html - CSS 转换和伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47211683/