如何为hover状态的::after伪元素设置延迟，使其在scale动画结束后显示

核心调整点 #

• 给.mb-3添加position: relative作为伪元素的定位上下文，避免绝对定位偏移
• 为::after伪元素提前定义非hover状态的所有基础属性，display、content属性不支持CSS过渡，不能只在hover状态下声明
• 把过渡绑定到支持动画的opacity属性上，过渡延迟设置为「缩放动画时长 + 额外等待的0.6s」，总延迟为1.1s
• 区分hover和非hover状态的过渡延迟，避免鼠标移出时伪元素也延迟消失，优化交互体验

修改后完整代码 #

.recipes {
  width: 100%;
  padding: 2rem;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .mb-3 {
    position: relative; /* 新增伪元素定位上下文 */
    transition: transform .5s ease 0s;

    &:hover {
      transform: scale(1.3);
      z-index: 2;
    }

    /* 伪元素默认状态 */
    &::after{
      content: "Click on me for full Recipe";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      color: white;
      background-color: black;
      opacity: 0;
      pointer-events: none;
      /* 鼠标移出时无延迟立刻隐藏 */
      transition: opacity .3s ease 0s;
    }

    &:hover::after {
      opacity: .85;
      /* 缩放0.5s完成后等待0.6s，总延迟1.1s触发显示 */
      transition-delay: 1.1s;
    }
  }
}

内容的提问来源于stack exchange，提问作者Dor Elisha