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

Question

<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;

        }

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

Answer 1

直接放CSS了，写法自己改吧：.item {&nbsp; &nbsp; width: 175px;&nbsp; &nbsp; height: 75px;&nbsp; &nbsp; border: 1px solid #f4f4f4;&nbsp; &nbsp; margin-bottom: 75px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; z-index: 10;&nbsp; &nbsp; cursor: pointer;}.item::before {&nbsp; &nbsp; content: 'alipay';&nbsp; &nbsp; color: rgba(255,255,255,.9);&nbsp; &nbsp; display: block;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; background-color: #4285f4;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; padding: 10px 0;&nbsp; &nbsp; transition: opacity .5s;&nbsp; &nbsp; opacity: 0;}.item:hover::before {&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp;&nbsp;}