[Support request] Counter-reset not working

[H]

Hi,

I’m using this css code to add counters to my H3 headings.

.single-post .entry-content {
counter-reset: h3counter;
}
.single-post .entry-content h3 {
display: flex;
align-items: flex-start;
}
.single-post .entry-content h3:not(.no-number):before {
content: counter(h3counter);
counter-increment: h3counter;
counter-reset: h4counter;
display: flex;
flex: 0 0 32px;
height: 32px;
align-items: center;
justify-content: center;
margin-right: 0.75em;
border-radius: 50%;
font-size: 15px;
background-color: #000;
color: #fff;
}

The counter reset is not working. I want the counter to reset to 1 if an H2 comes before an H3. Please see the link in the private box and other details.

Thank you.

[Fernando]

Hi HJ,

Can you try this code instead of the one you have?:

.single-post .entry-content {
counter-reset: h3counter;
}
.single-post .entry-content h3 {
display: flex;
align-items: flex-start;
}
.single-post .entry-content h2 {
counter-reset: h3counter 0;
}
.single-post .entry-content h3:not(.no-number):before {
content: counter(h3counter);
counter-increment: h3counter;
display: flex;
flex: 0 0 32px;
height: 32px;
align-items: center;
justify-content: center;
margin-right: 0.75em;
border-radius: 50%;
font-size: 15px;
background-color: #000;
color: #fff;
}

[H]

Hey Fernando,

Thanks for the code. It worked like a charm.

[Fernando]

You’re welcome, HJ!

[Author]

Posts