Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Daria Aubry
Daria Aubry
8,518 Points

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

Chris Shaughnessy
Chris Shaughnessy
26,175 Points

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

Daria Aubry
Daria Aubry
8,518 Points
Daria Aubry
Daria Aubry
8,518 Points

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