javascript - ::after伪类如何添加transition效果？

问题描述

问 题

<div class="list">
  <div class="item"><img src="alipay.jpg" alt="logo"></div>
</div>

.item {
        width: 175px;
        height: 75px;
        border: 1px solid #f4f4f4;
        margin-bottom: 75px;
        position: relative;
        z-index: 10;
        cursor: pointer;
        transition: all 0.5s;
        &:hover::before {
          content: 'alipay';
          color: #fff;
          text-align: center;
          background-color: #4285f4;
          opacity: 0.9;
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          z-index: 10;
          font-size: 30px;
          padding: 10px 0;
        }

过渡效果没有生效，如何给伪类加过度，或者在不添加额外标签的情况下实现这个效果

解决方案

直接放CSS了，写法自己改吧：

.item {
    width: 175px;
    height: 75px;
    border: 1px solid #f4f4f4;
    margin-bottom: 75px;
    position: relative;
    z-index: 10;
    cursor: pointer;
}
.item::before {
    content: 'alipay';
    color: rgba(255,255,255,.9);
    display: block;
    text-align: center;
    background-color: #4285f4;
    width: 100%;
    height: 100%;
    position: absolute;
    font-size: 30px;
    padding: 10px 0;
    transition: opacity .5s;
    opacity: 0;
}
.item:hover::before {
    opacity: 1;
    
}

这篇关于javascript - ::after伪类如何添加transition效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！