The first couple of these all have before and after pseudo elements. If you're going to use those its kind of cheating calling it a single div when you have 3 styleable elements
I disagree - you still only have one element in markup which is the whole point.
But when you're using CSS to turn one element into three... what is the "whole point", exactly?
It means you should be able to do more from semantic HTML only and CSS only, without mixing up markup and presentation.
Yet she uses a <div/> instead of an <img/>
The whole point is that you're using one element on your HTML code.
You're using CSS. That's the point. Many people still think CSS is still stuck in 2003. It's still limited, but it's come a long way... Heck, with just CSS you can have a webpage react to your turning off the lights on your phone.
Sure... but it's specifically using CSS to add extra elements. So it makes the "just one div" thing feel a little silly. Surely you could do "just no divs" and do the same trick on the <body> tag?