CSS Unused CSS Stages CSS Animations Full-Page Animation Project: Part 1

Why place boat image in a div, but not mike image?

In the animation sequence: Why does the boat image need to be placed into its own div, whereas the mike image doesn't? Can't you apply generated content using ::after directly on images?

2 Answers

This is interesting! I had no idea either - I found this explanation after a few searches online:

"Using before and after psuedo-elements with the img tag does not work in most browsers, by design.

Image tags are self-closing <tag /> tags because they contain no content. Since they do not contain any content, no content can be appended ::after or prepended ::before to the existing content."

Ah, wow, ok. That's really useful to keep in mind! Thank you :)