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

Question

Let's say I have something like this:

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

As can be seen ::after is positioned before the image and not as the last element of the div, but if I have only text inside the div ::after is indeed positioned as the last element.

I understand that I could position after with bottom and also understand that I can't insert pseudo-selectors to image tags, but here I am using a div and I don't get this behavior.

What I'd like to know is why it behaves like that.

don't repeat the same question, if you are not convinced with the answer given, edit your question or ask for clarification — Temani Afif, Nov 25 '20 at 01:45
I didn't repeat my question. You had already added this post to the other question I did, it didn't answer my question there and doesn't answer here. — Berg_Durden, Nov 25 '20 at 01:53
it does, read it fully to understand. it's not about display, it's about *static position*. The display will simply affect the static position — Temani Afif, Nov 25 '20 at 01:54

score 2 · Accepted Answer · answered Nov 25 '20 at 01:33

You need to add

display: block;

to your ::after.

Because by default, pseudo-elements are inline elements, and also img tags are inline as well. So they are trying to fit into the same line.

Once you make ::after display: block, it will fit itself in the next line and stay at the bottom of the img tag as expected:

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

Now it makes sense. There was already a couple hours it was bugging me. Thank you very much. — Berg_Durden, Nov 25 '20 at 01:41

score 1 · Answer 2 · answered Nov 25 '20 at 01:39

I'm not sure why, but as has been mentioned, both the <img> and the ::after pseudo-element are inline elements. As a matter of fact, you can see the same behavior if you use a plain <span> instead of a pseudoelement. (See below).

So I don't think this is as much a question about pseudoelements as it is about the interaction between the inline elements as they wrap around an absolute-positioned element.

Not a full answer, but maybe a step closer.

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

`I don't think this is as much a question about pseudoelements as it is about the interaction between the inline elements`. You're right, but it was beyond my knowledge. Now it makes sense. Thank you very much. — Berg_Durden, Nov 25 '20 at 01:44

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

2 Answers2