Discussion on: How to create pure CSS illustrations and animate them - Part 1

[Mark]

Thank you for this fun and detailed article! Going on with Part 2 now...

Just one thing. - What you do with this...

*:before, *:after {
  position: absolute;
  content: '';
}

...is to give every element on the page a :before and :after pseudo element. If you check the markup in the dev tools this doesn't look very nice. ;)

Maybe it would be better to create a mixin like this...

@mixin pseudo($pos: absolute, $content: '') {
  content: $content;
  position: $pos;
}

...and then call it in your pseudo element like so:

&:after {
  @include pseudo;
  width: 100px;
  height: 80px;
  ...

[Agathe Cocco]

Very good point!
I think if you have SEO or performance in mind, then going for a lighter markup is a great idea. I admit than in the case of CSS images, I am more interested in avoiding repetition. But for real life projects, I would definitely think of using a @mixin.
Thanks for your input.