CSS Before and After pseudo elements explained - part two: the content property

From the creator

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: 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 - http

Published 2018-02-22 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.