Transition-delay 属性不适用于伪元素 (::before &::after)

Question

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:hover::before {
  transition-delay: 2s;
  position: absolute;
  content: " ";
  width: 20px;
  height: 20px;
  border-bottom: 5px solid yellow;
  border-left: 5px solid yellow;
  bottom: 0%;
  left: 0%;
}

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

在这里，我注意到 transition-delay 属性在普通列表元素上起作用。 但是，这不适用于前后的伪元素。

Answer 1

您正在添加一个伪元素并试图同时给它一个延迟？

你为什么不先尝试添加伪元素，然后让它出现在 hover 上。（也许将不透明度设置为 0，然后在 hover 上设置不透明度：1？）

li::before {
  transition-delay: 2s;
  position: absolute;
  content: " ";
  width: 20px;
  height: 20px;
  border-bottom: 5px solid yellow;
  border-left: 5px solid yellow;
  bottom: 0%;
  left: 0%;
  opacity: 0;
}

li:hover::before {
  opacity: 1;
}