为什么不能在图像后放置 '::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确实定位为最后一个元素。

我知道我可以用 bottom 定位 after 并且我也知道我不能将伪选择器插入图像标签，但我在这里使用 div 和我不明白这种行为。

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

Answer 1

您需要添加

display: block;

给你的 ::after.

因为默认情况下伪元素是inline元素，img标签也是inline。所以他们试图适应同一条线。

一旦你制作了 ::after display: 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>

为什么不能在图像后放置 '::after' 伪选择器？

Why is not possible to position '::after' pseudo-selector after an image?

html

css

css-selectors

pseudo-element