CSS Before and After pseudo elements explained - part two: the content property. The before and after CSS pseudo elements are great, and they have the content property which a lot of people don't really know how powerful it actually is, so in this video I show you some fun things you can do with it, from a markupless tool tip to a quick dive into CSS counters, which are awesome!
The codepen is here: https://codepen.io/kevinpowell/pen/a1f3c682a5834b2d89e33bbfd42987aa
There is more to the css content property than this, but I think these will open your eyes to the possiblities:
2:08 I look at adding in quotation marks
3:38 A look at creating a markupless tool tip
11:36 Exploring adding images and icons
14:06 A look at the super awesome counters
And some more information on the content property for those who'd like some more reading - https://developer.mozilla.org/en-US/docs/Web/CSS/content
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
Support me on Patreon: https://www.patreon.com/kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Tags: CSS Before and After pseudo elements explained - part two: the content property, Kevin Powell, tutorial, html, css, css before and after, css pseudo elements, css before and after pseudo elements, pseudo elements content, pseudo elements content property, css content property, content property, css counters