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

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

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

· · Web · 0 · 0 · 1
Sign in to participate in the conversation

Welcome to thundertoot! A Mastodon Instance for 'straya