counter-increment not working

[ninna_lauridsen]

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.

/* ==========================================================================
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;
}

[dennisedson · Accepted solution]

@ninna_lauridsen,

add these pieces

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

[ninna_lauridsen]

Thanks Dennis! This sovled the issue.

[mpq]

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