求助：为Tooltip的:before/:after元素添加CSS淡入淡出效果失败

嘿，我来帮你拆解这个Tooltip淡入淡出失效的问题～

其实你猜的没错，问题确实和:before/:after伪元素的属性设置有关，但不是伪元素本身的锅，而是你可能踩了这几个常见的坑：

1. 用了display: none来隐藏伪元素 #

CSS的transition对display这种离散属性（只有开/关两种状态）是完全无效的。如果你的初始状态给伪元素加了display: none，哪怕hover时改成display: block，也只会瞬间显示/隐藏，不会有过渡效果。

2. 把transition只加在了hover状态 #

很多人会犯这个错：只在.tooltip:hover:before里加transition，但过渡动画需要在元素的默认状态就定义好，这样当状态变化时（比如hover），浏览器才知道要执行过渡。

正确的解决方案：用visibility + opacity组合实现淡入淡出 #

这是纯CSS实现Tooltip淡入淡出的标准方案，核心思路是：

• 默认状态：用visibility: hidden（元素存在但不可见）+opacity: 0（完全透明）隐藏伪元素，同时定义过渡属性
• hover状态：切换为visibility: visible+opacity: 1，触发过渡动画

给你一个完整的示例代码：

/* 基础Tooltip容器样式 */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  text-decoration: underline;
}

/* Tooltip内容伪元素（before） */
.tooltip:before {
  content: attr(data-tooltip); /* 从data属性获取提示文本 */
  position: absolute;
  bottom: 130%; /* 定位在元素上方 */
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background-color: #2d2d2d;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  white-space: nowrap;
  
  /* 关键初始状态：隐藏+透明，同时定义过渡 */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Tooltip箭头伪元素（after） */
.tooltip:after {
  content: '';
  position: absolute;
  bottom: 118%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #2d2d2d;
  
  /* 箭头同步过渡 */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* hover时显示Tooltip */
.tooltip:hover:before,
.tooltip:hover:after {
  visibility: visible;
  opacity: 1;
}

为什么这个方案有效？ #

• visibility是支持过渡的（虽然它的状态切换是瞬间，但配合opacity的渐变，视觉上就呈现出平滑的淡入淡出）
• 过渡属性定义在伪元素的默认状态，hover时状态变化会自动触发动画
• 避免了display: none的问题，让浏览器能正确计算过渡动画

如果之前用@keyframes动画没生效，大概率也是因为初始状态用了display: none，或者动画里没有正确切换visibility和opacity。用transition的方案比keyframes更简洁，完全能满足需求。

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