Flex 伪元素在悬停时没有动画答案

【问题标题】：Flex pseudo elements not animating on hoverFlex 伪元素在悬停时没有动画
【发布时间】：2019-11-05 05:38:07
【问题描述】：

这只是一个简化的例子，我有列表项目，每个项目在伪元素之后都有弹性项目。我正在使用这些动画悬停下划线效果。更改显示时它可以工作，但是当我使用 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>

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

【问题讨论】：

你能举一个没有flex的例子吗？
您确定要等待 300 秒进行转换吗？如果是这样，您会注意到它工作正常
@TemaniAfif：就是这样，谢谢！！！请关闭。

标签： css flexbox css-transitions

【解决方案1】：

我已经简化了您的代码，因为其中大部分与问题没有任何关系，这只是一个非常长的过渡持续时间。 300 秒。那是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>

【讨论】：