17370845950

答案：通过在父元素状态变化时触发伪元素的样式过渡，可间接实现::before和::after的动画效果，关键是将transition定义在伪元素自身规则中，并确保content存在、使用支持过渡的属性。

在CSS中，伪元素（::before 和 ::after）本身不能直接应用 transition，因为它们不是DOM中的独立元素。但你可以通过间接方式实现伪元素的过渡效果。关键是：将 transition 应用在父元素上，并通过改变父元素的状态来触发伪元素的样式变化。

1. 原理说明：transition 不能直接作用于伪元素

虽然你不能这样写：

但你可以把 transition 加在主元素上，然后通过主元素状态变化（如 :hover）来驱动伪元素的动画。

2. 实现 hover 下的 ::after 过渡效果

以下是一个常见场景：鼠标悬停时显示一个背景条。

.box {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
}
.box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #007acc;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease; / 关键：transition 写在主元素 /
}
.box:hover::after {
transform: scaleX(1);
}

说明：
- transition 定义在 .box::after 上，但它是被 .box:hover 触发的。
- 浏览器会追踪伪元素的属性变化并执行过渡。

3. 控制多个属性过渡

你也可以过渡颜色、大小、位移等：

.tip {
  position: relative;
}
.tip::before {
content: "提示";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%) translateY(10px);
opacity: 0;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
pointer-events: none;
transition: all 0.2s ease; / 支持 opacity, transform 等 /
}
.tip:hover::before {
transform: translateX(-50%) translateY(0);
opacity: 1;
}

这个例子实现了提示框从下往上淡入的效果。

4. 注意事项与兼容性

• 必须定义 content 属性，否则 ::before / ::after 不会渲染。
• 某些属性（如 height、width）在 transition 中表现良好，但需确保初始状态明确。
• transform 和 opacity 是性能最好的可动画属性。
• 避免对 display 或 content 做过渡——它们不支持渐变。
• 所有现代浏览器都支持伪元素上的 transition，但旧版IE不支持。

基本上就这些。只要把 transition 写在伪元素的规则里，并通过父元素状态改变其样式，就能实现流畅的视觉过渡。