Create custom list styles in CSS using pseudo elements and counters

Learn how to create custom list styles in the next installation of the Your Favorite Recipe project tutorial! This video will teach you how to use pseudo-elements and counters to create a custom designed list without having to type each individual number out. You'll learn about the before pseudo-element, and what properties are required for it to properly work in CSS. You'll also get to see some more advanced techniques such as custom box shadows and CSS transforms. Get ready to get styling!

Chapters in this video:
[00:00] Introduction
[00:48] Disable the default list styles
[01:18] Add the before pseudo element and required properties
[02:18] Getting numbers into the pseudo element using a counter
[02:41] Learning about the counter from CSS Tricks
[03:35] Implementing the CSS counter in our own code
[04:37] Why is the counter-reset important?
[04:54] Why bother with counters at all?
[05:11] Use absolute positioning to move the number
[05:54] Use the web inspector to test and refine values
[06:32] Font family, colors, and box-shadow details
[07:23] Use a CSS transform to "un-italicize" and tilt the number back
[07:57] Testing and perfecting the styles at different sizes
[09:33] Closing remarks