Chrome 和 Firefox 呈现 ::after 不同答案

【问题标题】：Chrome and Firefox render ::after differentlyChrome 和 Firefox 呈现 ::after 不同
【发布时间】：2021-10-27 21:00:25
【问题描述】：

如您所见，chrome 的渲染存在一些问题。并且仅在某些列表项上。

有人可以就发生的事情给我一些建议吗？

&:after {
  transition: 0.5s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: url('');
  color: transparent;
  background: $blue;
  height: 1px;
}

【问题讨论】：

请提供一个可重现的示例，这将包括相关的 HTML，以便我们可以运行 sn-p 并自己查看问题，您当前的代码中没有足够的内容来查看问题。例如，您的定位与什么相关？见stackoverflow.com/help/minimal-reproducible-example
不能超过一定数量的代码。如果有兴趣，可以设置一个 github repo。我对它为什么会发生更感兴趣。是否有一些关于使用 ::after 的规则我不知道。
您应该能够举出一个简单的示例，其中包含一个重现问题的列表。

标签： css google-chrome firefox

【解决方案1】：

我想你也应该放 Html 文件。顺便检查一下这个元素的父元素是否包含“position: relative”？而且你不需要为它设置一个边距值

【讨论】：

父级是display: flex;。我正在重写样式的一半，所以不需要解决方案。我只是想知道为什么chrome和ff之间存在差异。