2 ways to improve your list styling with CSS

::marker and counter() open up a lot of doors for styling our ol and uls!

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[NTHNGLIKEDEEZ]

please do an entire video about this, its awesome

[KTaco]

Im actually working on a site that has a numbered list. This really inspired me to spice up the design. Thank you!

[Franky_PT]

I feel like CSS is getting a bit too close to a programming language 😅

[rudythorns]

I studied all the deepdive css3 properties its hard to put them all in your head

[Elias-xpbs]

This is exactly what I was looking for!!!

[SAMIxD]

There is market instead of marker in the description :p

[mrArk_]

Pls do a video for this. Would be really helpful. Thanks

[kiritokun]

dang youtube please make save button for shorts i need this short later

[DarrenbyDesign]

Is that still accessible to screen readers? If so that is awesome

[a.galvaop.]

I guess this might make it easier adding different Imgs for each LI at the :before

[tadayoshi]

Very cool, do you have anything similar for select and option elements ?

[Vietnamkid]

Can we seriously not save shorts? This is a gem

[protocode_]

Huh. But .. what's the benefit here? Or is it rather intended for cases where we can't have a list?

[SXsoft]

Meanwhile me using ul+span in each li
After either backend(php) or frontend(js) render to set a number and style the span

[EverRusting]

Sick honestly but I'm worried about the browser support (I still don't use var and attr)

[danielk]

Helpful, but PLEASE slow down a little bit on the screen shots.

[Dejoblue]

Wait! Is this canonical CSS or LESS/SASS?

[mrArk_]

Too fast that I cant see the notes or what you are showing.

[fabsenk]

This is so inaccessible ... have to watch the complete video again just to get one second ... please stop uploading shorts