伪元素（::before/::after）本身在默认状态下并不存在于渲染树中，因此无法对未声明的样式属性应用 transition-delay；必须先定义伪元素的基础状态（如 opacity: 0、visibility: hidden 或 transform: scale(0)），再通过:hover 触发显式变化，才能使 transition 和 transition-delay 正常生效。
在 CSS 中，transition-delay 仅对已存在且可动画的属性生效。而 ::before 和 ::after 伪元素在未被 :hover 等伪类激活时，根本不会被浏览器创建和渲染——这意味着它们没有初始状态，也就无法参与过渡计算。因此，即使你在 li:hover::before 中写了 transition-delay: 2s，浏览器仍会忽略它，因为该伪元素在非 hover 状态下“不存在”，没有可插值的起始样式。
✅ 正确做法是：提前声明伪元素的基础样式（含 transition 属性），并在 hover 状态下仅变更可动画属性（如 opacity、transform、color 等）。
以下是修正后的完整示例：
nav > ul > li {
position: relative;
margin: 0 10px;
padding: 15px;
list-style: none;
font-size: large;
cursor: pointer;
}
/* 基础状态：定义伪元素，设为不可见但已存在 */
li::before,
li::after {
content: "";
position: absolute;
transition: opacity 0.3s ease 2s; /* delay 在此处统一设置 */
}
li::before {
width: 20px;
height: 20px;
border-bottom: 5px solid yellow;
border-left: 5px solid yellow;
bottom: 0;
left: 0;
opacity: 0;
}
li::after {
width: 20px;
height: 20px;
border-top: 5px solid yellow;
border-right: 5px solid yellow;
top: 0;
right: 0;
opacity: 0;
}
/* hover 时仅改变可见性或位置等可动画属性 */
li:hover::before,
li:hover::after {
opacity: 1;
}
/* 主元素颜色过渡（可选） */
li:hover {
color: yellow;
transition: color 0.3s ease 1s; /* 1s 延迟生效 */
}
? 关键要点总结：
- ❌ 错误：仅在 :hover::before 中定义伪元素 + transition-delay → 伪元素首次创建，无过渡；
- ✅ 正确：在 ::before（非 hover）中声明基础样式（含 content、position、opacity: 0 及 transition），再在 :hover::before 中仅修改 opacity: 1；
- ⚠️ 注意：transition-delay 必须与 transition-property 和 transition-duration 同时存在于初始状态规则中（即非 hover 的伪元素选择器），否则无效；
- ? 进阶提示：若需更精细控制（如分步入场），可结合 transform: scale(0) → scale(1) 或 visibility: hidden → visible（注意 visibility 不可动画，需配合 opacity 使用）。
遵循此模式，即可让伪元素真正支持延迟过渡，实现优雅的悬停动效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
