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

【问题标题】：Is it possible to set transition delay on :after?是否可以在 :after 上设置转换延迟？
【发布时间】：2016-02-09 20:19:15
【问题描述】：

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

这里是Fiddle

【问题讨论】：

标签： css-transitions pseudo-element

【解决方案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>

【讨论】：

【解决方案2】：

是的，它应该这样做，但你需要一个初始的 li:after 在你的 li:hover:after 之前

【讨论】：