Transition-delay属性在伪元素(::before、::after)上无法生效的问题咨询

你的问题出在伪元素的过渡逻辑上：当你只在li:hover::before/::after里写样式时，伪元素是在hover触发后才被创建出来的，没有初始状态到目标状态的变化过程，自然不会触发过渡效果，包括transition-delay。

解决方法是给伪元素的默认状态（非hover）设置初始样式，同时把transition属性放在默认状态里，让浏览器知道要监听哪些属性的变化：

修改后的完整CSS代码：

nav > ul > li {
  position: relative;
  margin: 0px 10px;
  padding: 15px;
  list-style: none;
  font-size: large;
  cursor: pointer;
}

nav > ul > li:hover {
  transition-delay: 1s;
  color: yellow;
}

/* 伪元素默认状态：设置初始样式 + 过渡规则 */
li::before {
  transition: all 0s 2s; /* 过渡属性，延迟2s */
  position: absolute;
  content: "";
  width: 0px; /* 初始宽为0 */
  height: 0px; /* 初始高为0 */
  border-bottom: 5px solid transparent; /* 初始边框透明 */
  border-left: 5px solid transparent;
  bottom: 0%;
  left: 0%;
}

li::after {
  transition: all 0s 2s;
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 0%;
  right: 0%;
}

/* hover时修改伪元素的目标样式 */
li:hover::before {
  width: 20px;
  height: 20px;
  border-bottom-color: yellow;
  border-left-color: yellow;
}

li:hover::after {
  width: 20px;
  height: 20px;
  border-top-color: yellow;
  border-right-color: yellow;
}

关键说明：

• 伪元素默认状态要设置初始值（比如宽高0、边框透明），这样hover时的变化才有过渡基础
• transition属性必须放在伪元素的默认状态中，而不是hover状态。这里transition: all 0s 2s表示过渡时长0秒（直接跳变），但延迟2秒触发，和你原本的需求一致
• hover状态只需要修改要变化的属性值（宽高、边框颜色），不需要重复写transition和position这些不变的属性

这样修改后，hover触发2秒后，伪元素的宽高和边框颜色会从初始值过渡到目标值，transition-delay就能正常生效了。

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