Firefox不显示：after伪元素

Question

当用户不上传自己的照片时，我正在使用伪元素显示后备个人资料图片。后备图片在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>

Answer 1

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

来自the spec：

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

有关原因，请参见this answer。