Transition-delay property is not working on the pseudo elements (::before & ::after)-CodePudding

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%;
}

Here, I noticed that the transition-delay property is working on the normal list element. But, which is not working on pseudo elements before and after.

CodePudding user response：

You are adding a pseudo element and trying to give it a delay at the same time?

why don't you try first adding the pseudo element and then make it appear on hover. (maybe set an opacity to 0 then on hover opacity: 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;
}