This bug I just encountered in Firefox is almost legal drinking age in the US: bugzilla.mozilla.org/show_bug.

So if you want to work around list-style-position being broken for 20 years, do this: hide the standard list counters, use a custom counter, and set it to display in the ::before pseudo-element of your header. That provides the same effect.

e..g,

ol {
counter-reset: index;
}

ol li {
counter-increment: index;
list-style-type: none;
}

ol li h3::before {
content: counter(index) '. ';
}

Show thread
Follow

@aral

As a base case, wouldn't this:

ol li::before {
content: counter(index) '. ';
}

work without having to make the list item an h3 (or whatever)?

Also, in what way is list-style-position broken?

Thanks! I hadn't worked with CSS counters like this before.

Sign in to participate in the conversation
Mastodon for Families and Friends

This is a family server