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/a1...
There is more to the css content property than this, but I think these will open your eyes to the possiblities:
00:00 introduction
01:00 use case: simple text befor/after
01:09 use case: insert images (e.g. background)
01:48 use case: opening/close quotes
03:27 use case: tooltip without a markup
07:57 tooltip: add hover effect + animation
09:31 tooltip: animation origin
10:53 tooltip reminder: attr
11:00 use case: text decorations
12:35 use cases: text decoration: font awesome
14:07 use cases: counters
16:34 use cases: counters: adding text (space, braces, etc)
17:11 use cases: counters: put in a circle
18:23 use cases: counters: put in a circle: align using flex
18:49 use cases: counters: put in a circle: border-radius
19:25 use cases: counters: put in a circle: border
19:37 use cases: counters: put in a circle: border-box
20:01 use cases: counters: put in a circle: color
20:19 use cases: counters: ol
21:39 use cases: counters: ol: turn off list style
23:38 use cases: counters: ol: couter-reset
And some more information on the content property for those who'd like some more reading - https://developer.mozilla.org/en-US/d...
---
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: • How to automatically refresh your bro...
---
Support me on Patreon: / 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.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Watch video CSS Before and After pseudo elements explained - part two: the content property online without registration, duration hours minute second in high quality. This video was added by user Kevin Powell 22 February 2018, don't forget to share it with your friends and acquaintances, it has been viewed on our site 412,653 once and liked it 17 thousand people.