是否可以设置转换延迟：之后？

Question

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

以下是Fiddle

Answer 1

也许如果您执行此类操作，首先设置: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>

Answer 2

是的，它应该这样做，但你需要一个初级li：在你的李之前：悬停：之后