counter-increment not working

Develop, Build & Integrate CMS Development
1

Hi everyone,

I’m new to designing and am not a developer. However, I’ve thrown myself into making some css for a featured snippet on the blog.

Only thing is, the ordered list is not counting numbers but only showing 1 as value.

Any help i appreciated.

Screenshot 2018-11-14 at 14.08.00.png
Screenshot 2018-11-14 at 14.08.00.png578×535 61.3 KB

/* ==========================================================================
Featured Snippet
========================================================================== */
.ib-featured-snippet ol {
counter-reset: item;
}

.ib-featured-snippet {
background-color: #f5f8fa;
width: 100%;
max-width: 600px;
padding: 2.75rem;
position: relative;
right: 0rem;

}
.ib-featured-snippet h2 {
border-radius: .1875rem;
text-align: left;
position: relative;
color: #000;
padding: 1rem 1rem 0rem 0rem
}

.ib-featured-snippet ol>li::before {
content: counter(item) “.”;
display: inline-block;
color: #2d3e50;
font-weight: 700;
text-align: right;
width: 1.5em;
padding-right: 0.5em;
}

.ib-featured-snippet ul, .ib-featured-snippet ol {
margin: 1.5em 0 1.25em 2.5rem;
padding: 0;
counter-increment: item;
text-indent: -2em;
list-style-type: none;
font-size: 20px;
}

2

Have you any link to see this? Anyway something like this works perfectly :

<ol class="ib-featured-snippet ">
<li>Text text</li>
<li>Text text</li>
<li>Text text</li>
<li>Text text</li>
<li>Text text</li>
</ol>

This the fiddle, and you can see your css works actually

3

@ninna_lauridsen,

add these pieces

.ib-featured-snippet ol > li {
 counter-increment: item;
}
4

Thanks Dennis! This sovled the issue.