Conceptual doubt regarding CSS rule "::after"

HTML-CSS
1

I have doubts regarding the “::after” CSS property. If you look into the image1, you’ll find two cases there.

CASE1:
I have added two “p” elements and grouped them into a “div” element. Then I used the “::after” property to see the effect. As this property says, the “::after” selector inserts something after the content of each selected element(s). In this case, the property inserts the content on the next line.

CASE 2:
I have added the “img” element and grouped it using the “div” element, and I used the “::after” property to add content and the content is added next to the image.

image
image1862×682 188 KB

Question => Why in first case, it is not being added next to “p” element ? And I tried the “::after” property on “p” element and it add next to it as shown below. why it is different in CASE 1?

image
image1431×496 23.5 KB

2

Hello!

In the first one you selection . after which has its width of 100px, and background color of green set with a CSS selector. This is a factor is how the display will appear.

The second one is strickly the p element which does not have any preset width or styles.

This is my perception of the results variation.

Happy coding! :slight_smile:

3

@Life.Blessed
I have tried giving from minimum to maximum width values, but the result is the same :smiling_face_with_tear:

4

I am not sure. But, I am sure someone can answer it for you!

Happy coding!:slight_smile: