In this video we will look at the ::before and ::after CSS pseudo elements as well as their uses.
We will look at how to create the pseudo elements and 4 of the common uses, the modified borders, rounded image borders, transparent backgrounds and bespoke css counters.
Chapters:
0:00 Video Start
0:51 Mini Housekeeping
1:33 What are the ::before and ::after
2:04 Example demo
2:22 JavaScript equivalent
5:33 Why we use ::before and ::after
8:46 Modified Borders
12:30 Rounded image borders
14:35 Transparent backgrounds
18:15 The fade-in image fade-out content trick
20:49 Bespoke counters
24:48 Video wrap-up
Links:
Site Files: http://tiny.cc/beforeafter
getting started series: • Getting started