为什么':: after'伪选择器位于图像上方而不位于图像下方? [英] Why is '::after' pseudo-selector over the image and not under it?

问题描述

我有这个容器，其中包含一些文本和一个图像作为最后一个元素，我正在尝试为容器设置一个 :: after ，但是它在图像上显示，而不是容器的最后一个元素:

I have this container with some text and an image inside it as last element, I am trying to set an ::after to my container, however it is being shown over the image and not as the last element of the container:

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

I understand that I can't set a pseudo-selector to an <img/>, but here I am setting ::after to the container and I don't get why it isn't working properly.

为什么会发生这种情况，我怎么才能使 :: after 实际上是 testDiv 的最后一个元素?

Why is this happening and how could I make ::after actually the last element of testDiv?

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

P.S. I can't set the container or any parent element with position: relative, since I need ::after to have the same width as the screen and not just to fit inside the container and I don't have any element with the same width as the screen.

P.S. margin-left:100px 只是为了使其更易于在摘要中显示，因此对我的目的无关紧要.

P.S. The margin-left:100px is just to make it easier to be seen in the snippet, therefore it doesn't matter to my purpose.

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

推荐答案

据我所知，没有一个现成的答案实际上解决了为什么线在上方而不是在图像下方的问题.原因可以在 CSS 2.2第10.6.4节中找到.绝对定位且不可替换的元素，其中指出:

As far as I can see, neither existing answer actually address the question of why the line is over, not under the image. The reason can be found in CSS 2.2 Section 10.6.4. Absolutely positioned, non-replaced elements where it says if:

顶部和底部为自动，高度不是自动，然后将顶部设置为静态位置，将margin-top和margin-bottom的自动值设置为0，然后求解底部

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 的框的顶部.

Which means that the top of the absolute positioned box will be the top of where the box would have been had not been position:absolute.

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

Since both the img and the ::after pseudo element without position:absolute are display:inline they would have lined up alongside one another. The pseudo element taken out of the flow and stretched horizontally to meet the left:0;right:0 requirements.

这意味着您可以通过将:: after伪元素 display:block 变为红色，将红线移到img下方.

What this means is that you can move the red line to below the img just by making the ::after pseudo element display:block.

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

This is quite an interesting effect given that we normally think of position:absolute blockifying the box anyway, but this only happens after the static position calculation.

另一种解决方案，也许更直观一些，是使img元素为 display:block .

Another solution, perhaps a little more intuitive, is to make the img element 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'伪选择器位于图像上方而不位于图像下方?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！