# counter-increment not working

**URL:** <https://community.hubspot.com/t/counter-increment-not-working/10926>\
**Category:** CMS Development\
**Created:** [November 14, 2018, 1:08pm UTC](https://community.hubspot.com/t/counter-increment-not-working/10926 "2018-11-14T13:08:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ninna\_lauridsen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ninna_lauridsen/32/86538_2.png) [@ninna\_lauridsen](https://community.hubspot.com/u/ninna_lauridsen)\
**Post date:** [November 14, 2018, 1:08pm UTC](https://community.hubspot.com/t/counter-increment-not-working/10926/1 "2018-11-14T13:08:24Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/2X/e/ef3a774f05f1e5d6bbd8f79a84a1d97e6766ef3f.png)

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

---

<div class="post-metadata">

**Author:** ![mpq](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mpq/32/54781_2.png) [@mpq](https://community.hubspot.com/u/mpq)\
**Post date:** [November 14, 2018, 4:12pm UTC](https://community.hubspot.com/t/counter-increment-not-working/10926/2 "2018-11-14T16:12:55Z")

</div>

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

```auto
<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](http://jsfiddle.net/z43fp1gs/), and you can see your css works actually

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 15, 2018, 5:25am UTC](https://community.hubspot.com/t/counter-increment-not-working/10926/3 "2018-11-15T05:25:56Z")

</div>

[@ninna\_lauridsen](https://community.hubspot.com/t5/user/viewprofilepage/user-id/75589),

add these pieces

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

```

---

<div class="post-metadata">

**Author:** ![ninna\_lauridsen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ninna_lauridsen/32/86538_2.png) [@ninna\_lauridsen](https://community.hubspot.com/u/ninna_lauridsen)\
**Post date:** [November 15, 2018, 8:17am UTC](https://community.hubspot.com/t/counter-increment-not-working/10926/4 "2018-11-15T08:17:34Z")

</div>

Thanks Dennis! This sovled the issue.