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

Follow

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) '. ';
}

@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.

@aral In the example bug36854.bmoattachments.org/at is there a good reason to use block elements inside the <li> tags? I get that <div> is block by default, and li>div { display: inline; } could also resolve the issue (in maybe a dirtier way), but why has the example explicitly set the <a> elements to display: block? Is there an accessibility or flow-on reason to do so that I'm missing?

@aral I get that, I just wondered why you wouldn't be able to do something like
li>h3 { display: inline; }
I figured there must be a reason the example explicitly set the <a> tag to block but I guess it was just to show the broken behaviour.

@aral and now I'm guessing your fix is more complex to resolve it without breaking it in browsers other than Firefox. Carry on.

Sign in to participate in the conversation
Aral’s Mastodon

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!