为什么不能在图像之后放置 '::after' 伪选择器？ [复制]

Question

假设我有这样的事情：

    .test-container {
        margin-left: 100px;
        margin-top: 40px;
    }

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

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

可以看出::after 位于图像之前，而不是作为 div 的最后一个元素，但如果我在 div 内只有文本，::after 确实定位为最后一个元素。

我知道我可以将after 与bottom 一起定位，并且我也知道我不能将伪选择器插入图像标签，但这里我使用的是div，但我没有得到这种行为。

我想知道它为什么会这样。

Answer 1

你需要添加

display: block;

致您的::after。

因为默认情况下，伪元素是inline 元素，img 标签也是inline。所以他们试图融入同一行。

一旦你创建了::afterdisplay: block，它就会自动适应下一行，并按预期停留在img标签的底部：

.test-container {
    margin-left: 100px;
    margin-top: 40px;
}

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

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

Answer 2

我不知道为什么，但如前所述，<img> 和 ::after 伪元素都是内联元素。事实上，如果您使用普通的 <span> 而不是伪元素，您可以看到相同的行为。 （见下文）。

所以我不认为这是一个关于伪元素的问题，因为它是关于内联元素之间的交互，因为它们环绕一个绝对定位的元素。

不是一个完整的答案，但可能更接近一步。

    .test-container {
        margin-left: 100px;
        margin-top: 40px;
    }

    .test-container2 {
        content: "";
        position: absolute;
        height: 2px;
        background-color: red;
        left: 0;
        right: 0;
    }

<div class="test-container">
   <h1>TESTE</h1>
   <h2>TESTE</h2>
 

   <img src="https://www.acmetek.com/wp-content/uploads/rapidssl-logo.png" />
   <span class="test-container2"></span>
</div>