是否可以在 :after 上设置转换延迟？

Question

如何设置 li:after 的过渡延迟，使其与 li:hover 的过渡保持一致？设置 transition: all 0.3s; 时似乎不起作用，因为它立即出现。

这是Fiddle

Answer 1

是的，它应该可以，但是您需要在 li:hover:after

之前添加初始 li:after

Answer 2

也许如果你做这样的事情，首先设置 :after 然后在 :hover

上显示

body {
  background-color: #f01;
}

ul {
  background-color: #fff;
}

li {
  position: relative;
  list-style-type: none;
  display: inline;
  line-height: 2em;
  padding: 5px;
  transition: all 1s;
}

li:hover {
  background-color: #414C52;
  transition: all 1s;
}

li:after {
  top: 25px;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #414C52;
  margin-left: -10px;
  transition: all 1s;
  border-width: 10px;
  opacity: 0;
}

li:hover:after {
  opacity: 1;
  transition: all 1s;
}

a {
  padding: 12px 10px color: #333;
}

<ul class="nav navbar-nav">
  <li><a href="#">asdfasdf</a></li>
  <li class="active"><a href="#">ffffft</a></li>
</ul>

是否可以在 :after 上设置转换延迟？

Is it possible to set transition delay on :after?

pseudo-element

css-transitions