css标签hover时只想展示底部渐隐阴影怎么办_利用::after伪元素生成阴影层-css教程-PHP中文网

css标签hover时只想展示底部渐隐阴影怎么办_利用::after伪元素生成阴影层

P粉602998670

发布： 2025-12-16 07:57:14

原创

863人浏览过

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

css标签hover时只想展示底部渐隐阴影怎么办_利用::after伪元素生成阴影层

只在 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;
}

登录后复制