:active:before的使用

当时要实现的一个效果是：一个盒子里有图片，文字，active这个盒子时，盒子的背景色变成某个颜色，要实现的效果是：

最开始的代码是：

<div class="list-item">
   <div class="item-wrapper">
        <img src="./images/taohua.jpeg">
        <div>标题</div>
        <div>时间</div>
    </div>
</div>

css:

.list-item {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid #ededed;
    position: relative;
    cursor: pointer;
}
.list-item:active {
    background: rgba(0, 0, 0, .5);
    border: 1px solid #ccc;
}
.item-wrapper {
    width: 100%;
    height: 100%;
}
.item-wrapper img {
    width: 100%;
}

结果效果为：

这是因为本来图片的背景色是白色的，最后修改代码为：

.list-item:active::before {
    content: ' ';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
}

这样就可以实现所需的效果了。

来源：CSDN

作者：zhener09

链接：https://blog.csdn.net/sinat_41747081/article/details/104058849