Flex 伪元素在悬停时不动画

Question

这只是一个简化的例子，我有一个列表项，每个列表项在伪元素之后都有弹性项。我正在使用这些来制作悬停时的下划线效果。当显示改变时它可以工作但是当我使用 flex 时没有效果。这是一个例子：https://jsfiddle.net/79ftcx48/2/

html div {
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  padding: 1%;
  transform: translate(-50%, -50%);
  justify-content: space-between;
  align-items: stretch;
}

html div>* {
  background-color: slategrey;
  margin: 0 5px 0;
  color: floralwhite;
  padding: 5px;
}

html div ul {
  display: flex;
  flex-direction: column-reverse;
  list-style: none;
  margin-right: auto;
  order: -1;
}

html div ul li::after {
  content: "";
  display: flex;
  height: 1px;
  width: 0px;
  transition: all 300s ease;
  background-color: peru;
  order: -1;
}

html div ul li:hover::after {
  width: 40px;
}

<div>

  <aside>
    This is the aside
  </aside>
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
  <p>
    Lorem ipsum text is pretty freaking dumb.
  </p>

</div>

是我做错了什么还是浏览器不支持？

Answer 1

我已经简化了你的代码，因为它的大部分与问题没有任何关系，这只是一个非常长的过渡持续时间。 300s。那是5分钟！下面用 1s 进行测试。您的代码工作正常。

div {
  display: flex;
}

div>* {
  background-color: slategrey;
  margin: 0 5px 0;
  color: floralwhite;
  padding: 5px;
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin-right: auto;
  order: -1;
}

div ul li::after {
  content: "";
  display: flex;
  height: 2px;
  width: 0px;
  transition: all 1s ease;
  background-color: peru;
}

ul li:hover::after {
  width: 40px;
  background-color: orange;
}

<div>
  <aside>
    This is the aside
  </aside>
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
  <p>
    Lorem ipsum text is pretty freaking dumb.
  </p>
</div>

Flex 伪元素在悬停时不动画

Flex pseudo elements not animating on hover

css

flexbox

css-transitions