如何用CSS实现.edit:hover:after内容延迟2秒显示？

当然可以用纯CSS搞定！你之前尝试的方法没效果，核心原因是**content属性本身不支持过渡动画**，所以给它加transition完全起不到延迟的作用。咱们换个思路，通过控制伪元素的可见性和透明度来实现需求，这俩属性是支持过渡的。

具体实现代码 #

.edit {
  position: relative; /* 让伪元素相对于父元素定位，避免乱跑 */
}

.edit:after {
  content: '✐';
  position: absolute;
  left: 100%; /* 把编辑图标放在元素右侧，可根据需求调整位置 */
  margin-left: 6px;
  /* 默认状态：完全透明+不可见，确保不占空间也不干扰交互 */
  opacity: 0;
  visibility: hidden;
  /* 设置过渡动画，针对opacity和visibility属性 */
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.edit:hover:after {
  opacity: 1;
  visibility: visible;
  /* 关键：设置2秒的延迟，悬停2秒后才触发过渡效果 */
  transition-delay: 2s;
}

为什么这个方案可行？ #

• visibility和opacity是CSS中支持过渡动画的属性，我们通过默认隐藏（opacity:0; visibility:hidden）、hover时显示的状态切换，配合transition-delay:2s，就能实现悬停2秒后才出现图标的效果。
• 用visibility而不是display:none，是因为display同样不支持过渡，而visibility在隐藏时仍会占据空间（不过这里我们用定位把它放在元素外，不影响布局），同时能配合过渡实现平滑的显示/隐藏。

额外优化点 #

如果你希望鼠标移开图标后立刻消失，不需要延迟，可以给.edit:after的基础过渡保持默认的transition-delay:0s（其实不用额外写，默认就是0），这样hover时延迟2秒显示，移开时立刻恢复隐藏状态。

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