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?
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 :)