Archived topic
Counter-reset not working
3 replies · Started by H on January 26, 2023
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.
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;
}Hey Fernando,
Thanks for the code. It worked like a charm.
You're welcome, HJ!