Thread by @codewithshripal

5 things about Lists in HTML that you may not know 🧵

#webdev #DEVCommunity #100DaysOfCode

1️⃣ Custom starting number

We can start an ordered list from any custom starting number using "start" attribute.

2️⃣ Reverse list

We can reverse the order of an ordered list by just passing "reversed" attribute to the list.

3️⃣ Style bullets/numbers using ::marker

Using ::marker psuedo-element, we can do the below styling for bullets/numbers:
→ change color
→ use different marker for each item
→ use image as marker
→ apply animation/transition
→ use a different font for the number

You can learn all about ::marker pseudo-element and see demo of its use-cases with sample code in this thread ↓

https://twitter.com/codewithshripal/status/1534183203283640320

4️⃣ Number with leading zero

We can append zero to single digits of numbered list by setting "decimal-leading-zero" as list-style-type.

5️⃣ Style number using counter

We can change style of number representation in an ordered list by using ::marker pseudo-element and list-item counter.

Thanks for checking this out.

Follow @codewithshripal for more such threads on web development.

Retweet/like the first tweet of the thread to help spread the word.

https://twitter.com/codewithshripal/status/1543959617360859141