用::after伪元素实现hover底部渐隐阴影最干净，需父元素设position:relative和z-index:1，::after用linear-gradient创建12–24px高渐变阴影层，bottom设负值定位，通过opacity和transform过渡控制显隐与浮起效果。

只在 hover 时显示底部渐隐阴影，用 ::after 伪元素是最干净、可控的方式。关键是把阴影层定位在元素底部，用线性渐变模拟“从实到透明”的过渡效果，并确保它只在悬停时出现。

1. 基础结构：给目标元素设相对定位

伪元素默认相对于父元素定位，所以必须先让目标标签（比如 button 或 div）有 position: relative，否则 ::after 可能脱离预期位置。

• 不加 position: relative → ::after 可能按 body 或最近定位祖先定位，容易偏移
• 推荐写法：position: relative; z-index: 1;（z-index 防止阴影被其他内容遮挡）

2. 用 ::after 绘制底部阴影层

阴影层本质是一个宽高适配的矩形，覆盖在元素正下方，用 background: linear-gradient() 实现从深灰（或黑）到透明的垂直渐变。

• 高度建议 12–24px（太矮不明显，太高显笨重）
• 宽度设为 100%，left: 0 对齐左边缘
• 用 transform: translateY(0) 起始位置，hover 时改为 translateY(4px) 让它“浮起”一点，更自然
• 示例样式：

.card:hover::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -12px; /* 阴影从底部边缘开始向下延伸 */
  width: 100%;
  height: 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent);
  z-index: -1;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 100%;
  height: 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent);
  z-index: -1;
  opacity: 0;
}

3. 控制显示时机与动效

不要用 display: none/block 切换 —— 它无法过渡。统一用 opacity + transition 实现淡入淡出，再配合 transform 微调位置，视觉更轻盈。

• 初始状态：opacity: 0，且可加 transform: translateY(4px) 让它“藏”在更下方
• hover 状态：opacity: 1 + transform: translateY(0)
• transition 推荐写全：transition: opacity 0.25s ease, transform 0.25s ease;

4. 注意细节避坑

常见问题基本都出在定位和层级上：

• 阴影没出现？检查父元素是否漏了 position: relative
• 阴影错位？确认 bottom 值是负数（如 -12px），表示从底边往下偏移
• 阴影被盖住？给伪元素设 z-index: -1，同时确保父元素 z-index ≥ 1
• 想适配圆角卡片？给 ::after 加 border-radius: 0 0 8px 8px 匹配底部弧度

基本上就这些。核心就是：相对定位打底 + 伪元素画渐变层 + opacity 控显隐 + transform 增细节。不复杂但容易忽略定位和 z-index，调通一次，以后直接复用。