A rather geeky/technical weblog, est. 2001, by Bramus
Using CSS Counters, Josh W Comeau injects his own number in ordered lists. That way he can style the number itself separately. ol li { counter-increment: muffins; } ol li:before { content: counter(muffins) ". "; color: hotpink; } ol { list-style: none; counter-reset: muffins; } Apart from styling, I find this technique come in handy …
<ol>‘s start and reversed attributes (and more) #HTML tip for today: <ol> element has `start` and `reversed` attributes! Some examples where it's useful:`start` → paginated results`reversed` → "top 10 best … " lists pic.twitter.com/vkh88h2zGV — Tomek Sułkowski (@sulco) March 20, 2020 Handy for those end-of-year lists 😉 ~ Apart from overriding the list style using CSS’s list-style-type (which you should set it …
Continue reading “<ol>‘s start and reversed attributes (and more)”
list-style-type: <string>
Since CSS Level 2, CSS list-style-type has supported keywords like disc or decimal to define the appearance of the list item marker. Landing in Chrome 79, and also available in Firefox ever since version 39, is the ability to set it to an arbitrary string. Here’s a pen that demonstrates its behavior / usage: Let’s …
Continue reading “Change the marker of a list to any character with list-style-type: <string>“
Working with nested lists is not an uncommon practice, yet I’ve noticed that some (and I before) had troubles when working with nested lists of different types (viz. an ol inside an ul or vice versa). However, it shouldn’t be a burden at all, here’s a hat tip, saving you some headaches.