Numeric List With Reversed Numbers Not Working

Interesting. It works if I take your HTML and paste it into https://codepen.io/sterndata/pen/rNLgrab. I’m going to ask the folks in the back room to take a look.

Your theme has an “ol {counter-reset:item}” in the CSS that seems to govern. There might be a way around it– see https://css-tricks.com/how-to-reverse-css-custom-counters/

But first, I recommend asking at https://wordpress.org/support/theme/customizr#new-post so the theme’s developers and support community can help you with this.

Hello,

I agree, the theme authors should be taking care of this but there really isn’t a practical way at the moment to use reverse attribute while also using CSS Counters. A better approach might be to just ditch the CSS Counters entirely. This will allow your ordered lists ( with this specific class ) to increment and reverse normally. You can paste the following CSS into Appearance > Customize > Additional CSS:

ol.normalize {
	list-style-type: decimal;
	counter-reset: unset;
}

.czr-wp-the-content ol.normalize>li:before,
.woocommerce-Tabs-panel.entry-content ol.normalize>li:before,
.woocommerce-product-details__short-description ol.normalize>li:before {
	display: none;
}

You would then need to update the OL to the following:

<ol reversed start="39" class="normalize">

I think that’s the best approach to achieve what you’re looking to do. Hopefully the above works for you but if not feel free to return here and we can assist you further!

Thanks very much everyone. I guess if it’s a problem with the theme, that would definitely explain why it works as it should within WordPress but not when displayed “live” on the page.

Not many people use numbered lists reversed I suppose and this was just an odd occasion, revising an old page and converting it to the block editor.

I will ask them over at Customizr. Really appreciate the help.



Source link