Ecommerce Shopify WordPress Discussion

How to automatically make H2 to be an ordered list (ol li) in a blog [closed]

Closed. This question needs debugging details. It is not currently accepting answers. Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question. Closed 6 days ago. Improve this question I want to make the headings (H2) in a blog a list item. The heading is separated by paragraphs. I'm using Wordpress and in my blog editor, there is no ability to make H2 be a list. So I want a CSS code to add to my theme. The code outcome I need can be something like the one shown in the image (link given) where instead of an H2 line, it's converted to a list. Here is the link to the image I only have a code for ol and ul items as shown below: /*I tried this:*/ h2:before { content: counter(mylist) ". "; font-weight: bold; color: blue; } h2:before { counter-increment: list-number; content: counter(list-number); margin-right: 10px; margin-bottom:10px; width:35px; height:35px; display:inline-flex; align-items:center; justify-content: center; font-size:16px; background-color:#d7385e; border-radius:50%; color:#fff; } And the output is this: enter image description here
Your selectors need some adjusting, like so; h2 { counter-increment: list-number; display: flex; align-items: center; } h2:before { content: counter(list-number); margin-right: 1em; width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background-color: #d7385e; border-radius: 50%; color: #fff; } <h2>lorem</h2> <h2>lorem</h2> <h2>lorem</h2> Run code snippetExpand snippet

January 7, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.