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
Auf dieser Seite können Sie das Online-Video CSS Before and After pseudo elements explained - part two: the content property mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Kevin Powell 22 Februar 2018 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 412,653 Mal angesehen und es wurde von 17 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
