This bug I just encountered in Firefox is almost legal drinking age in the US:

· · Web · 4 · 3 · 7

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.


ol {
counter-reset: index;

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

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


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

@aral It would already have sustained severe liver damage in Germany

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!