Conceptual doubt regarding CSS rule "::after"

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

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.

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.

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?


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:

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

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

Happy coding!:slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.