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

Question

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

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

为什么会这样，我怎样才能使 ::after 实际上成为 testDiv 的最后一个元素？

P.S。我无法使用 position: relative 设置容器或任何父元素，因为我需要 ::after 具有与屏幕相同的宽度，而不仅仅是适合容器内部，而且我没有任何元素与屏幕宽度相同。

P.S。 margin-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

鉴于您的评论

It doesn't solve my problem, since I need the ::after to have the width of the screen and not only of the container

您需要将position:relative设置为.testDiv 父元素，同时将bottom:0和width:100%添加到伪元素

.testDiv {
  position: relative
}

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

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

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

更新 - 根据您的评论

您需要设置 bottom: (any value)(any unit you need) 或 top: (any value)(any unit you need)

.testDiv>div::after {
  position: absolute;
  height: 2px;
  content: "";
  background-color: red;
  left: 0;
  bottom: 50px;
  width: 100%
}

<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 2

您仍然可以使用 position:relative，但您的元素会从两侧溢出：

.testDiv>div::after {
  position: absolute;
  height: 2px;
  content: "";
  background-color: red;
  left: -100vw; /* big value here */
  right: 0;
  bottom: 0;
  box-shadow: 100vw 0 0 red; /* big value here too*/
}

.testDiv>div {
  margin-left: 100px; /* we have a margin */
  width: 200px; /* and a width too */
  position: relative;
}

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

Answer 3

据我所知，现有的答案都没有真正解决为什么线在上面而不是在图像下面的问题。原因可以在 CSS 2.2 Section 10.6.4. Absolutely positioned, non-replaced elements 中找到，其中写着 if:

top and bottom are auto and height is not auto, then set top to the static position, set auto values for margin-top and margin-bottom to 0, and solve for bottom

和

the static position for top is the distance from the top edge of the containing block to the top margin edge of a hypothetical box that would have been the first box of the element if its specified position value had been static and its specified float had been none and its specified clear had been none.

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

因为没有 position:absolute 的 img 和 ::after 伪元素都是 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>

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

Why is '::after' pseudo-selector over the image and not under it?

html

css

css-selectors

pseudo-element

更新 - 根据您的评论