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: [ Ссылка ]

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 - [ Ссылка ]

---

New to Sass, or want to step up your game with it? I've got a course just for you: [ Ссылка ]

---

My Code Editor: VS Code - [ Ссылка ]

How my browser refreshes when I save: [ Ссылка ]

---

Support me on Patreon: [ Ссылка ]

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: [ Ссылка ]
Twitter: [ Ссылка ]
Codepen: [ Ссылка ]
Github: [ Ссылка ]

свернуть