Css Firefox未显示：在伪元素之后

当用户不上传他/她自己的文件时，我使用伪元素来显示备用配置文件图片。回退图片在Chrome上运行良好，但在Firefox上不起作用。知道这是什么原因吗

Chrome

Firefox

CSS

.agent-photo{
  width: 70px;
  height: 70px;
  border-radius: 50px;
  object-fit: cover;
  position: relative;
}

.agent-photo:before {
  background-image: url('../img/default-user-2.jpg');
  background-size: 70px 70px;
  content: '';
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50px;
  margin-bottom:3px;
}

.agent-thumbnail-container{
  position: absolute;
  top: 50%;
}

.confirmation-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

HTML

<div class="agent-thumbnail-container">
    <img class="agent-photo" src="http://127.0.0.1:8000${agent.profile_pic}" alt="">
    <img class="agent-check" src="img/checkmark-green-circle.svg" alt="">
</div>

---

大多数浏览器不支持img标记上的伪元素

发件人：

注意。本规范未完全定义 ：before和：after替换为元素（如HTML中的IMG）。这 将在未来的规范中更详细地定义

---

有关原因的解释，请参阅。

我们应该将问题标记为重复，而不是重复相同的答案。如果您不能标记，请将其添加为注释谢谢，我感谢您的解释。我最终使用了内置的onerror函数来呈现回退画面。