Pseudo: Before and After

This has a pseudo element to make the first letter large and first line blue

Lorem ipsum dolor sit amet consectetur adipisicing elit. Id asperiores repellat quo, cupiditate quia culpa consequuntur fugit rerum animi, iste eligendi labore, similique molestias maiores necessitatibus quod amet atque voluptatem. So this is the second line and isn't affected by the rule and therefore isn't blue

Windows key and semi-colon get emojies

The above div uses ::before and ::after to place emojies

Hmmmmmm, not what I was expecting but ::before did put a coloured bkgd under the emojie

HTML
CSS
JS

VB.net
C#
PHP

So putting ::before here does nothing to this text at all. Yes it does....just not how I expected

Text here with colour-end class should have a coloured box after

Div with heroine class should have preceding text...yup

This one doesn't seem to work. How do I get it to go inline?? Removed display:block

This one doesn't seem to work. How do I get it to go inline?? Removed display:block as well

Can I get this to rotate...Nope. Not yet. But the bkgd colours above are from this div using the rotate rule.

Middle Circle? Yes

And finally CSS Selectors
And we can't forget the pseudo classes/elements list here and here