为什么 '::after' 伪选择器位于图像上方而不是下方？

Question

我有一个带有一些文本和图像的容器作为最后一个元素，我试图::after为我的容器设置一个，但是它显示在图像上而不是作为容器的最后一个元素：

我知道我不能将伪选择器设置为<img/>，但在这里我设置::after为容器，我不明白为什么它不能正常工作。

为什么会发生这种情况，我如何才能::after真正制作 的最后一个元素testDiv？

PS 我不能用 设置容器或任何父元素position: relative，因为我需要::after与屏幕具有相同的宽度，而不仅仅是为了适应容器，而且我没有任何与屏幕宽度相同的元素。

PSmargin-left:100px只是为了更容易在片段中看到，因此与我的目的无关。

.testDiv > div::after {
  position: absolute;
  height: 2px;
  content: "";
  background-color: red;
  left: 0;
  right: 0;
}

.testDiv > div {
  margin-left: 100px;
}

<div class="testDiv">
    <div>
      <h1>TEST</h1>
      <h2>TEST</h2>
      <img src="https://www.acmetek.com/wp-content/uploads/rapidssl-logo.png" />
    </div>
</div>

Answer 1

据我所知，现有的答案都没有真正解决为什么线条结束而不是图像下方的问题。原因可以在CSS 2.2 Section 10.6.4 中找到。绝对定位的、不可替换的元素，如果：

top和bottom是auto，height不是auto，然后设置top为静态位置，设置margin-top和margin-bottom的auto值为0，求解bottom

和

top 的静态位置是从包含块的顶部边缘到假设框的顶部边距边缘的距离，如果其指定的位置值是静态的并且其指定的浮点数为无，则该假设框将是元素的第一个框并且其指定的明确没有。

这意味着绝对定位框的顶部将是该框本来不在的位置的顶部position:absolute。

由于没有 img 和 ::after 伪元素position:absolute，display:inline它们会彼此并排排列。从流中取出的伪元素进行水平拉伸以满足left:0;right:0要求。

这意味着您可以通过制作 ::after 伪元素将红线移动到 img 下方display:block。

这是一个非常有趣的效果，因为我们通常会考虑position:absolute阻塞盒子，但这只会在静态位置计算之后发生。

另一种可能更直观的解决方案是制作 img 元素display:block。

.testDiv > div::after {
  position: absolute;
  height: 2px;
  content: "";
  background-color: red;
  left: 0;
  right: 0;
  display:block;
}

.testDiv > div {
  margin-left: 100px;
}

<div class="testDiv">
    <div>
      <h1>TEST</h1>
      <h2>TEST</h2>
      <img src="https://www.acmetek.com/wp-content/uploads/rapidssl-logo.png" />
    </div>
</div>