为什么当我使用 ：before / ：after 后台 URL 时链接不起作用？

Question

我想为我的css按钮添加一些背景结构。这就是按钮代码的样子：

.button a {
color: white;
padding: 2% 6%;
width: 100%;
margin-top: 3%;
display: inline-block;
text-decoration:none;
background-color: #49c0f0; background-image: -webkit-gradient(linear, left top, left bottom, from(#49c0f0), to(#2CAFE3));
position:relative;}

现在我用户：after将几乎透明的背景图像添加到按钮：

.button a:after {
content:'';
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:url(../images/structure.png);
opacity:0.05;}

它看起来不错，但不幸的是，这些按钮之前和之后的所有链接都不再可点击。我想知道它是否与周围物品的绝对/相对位置有关......

Answer 1

那是因为.button a:after是绝对定位的，所以默认情况下它显示在.button a前面。

为避免这种情况，您可以使用z-index：

.button a:after {
    z-index: -1;
}