How to style the number together with the item in an ordered list?

When I define an .active class for an ordered list item, the item number is not styled.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

li.active {
  background-color: #c5ecbe;
  width: 14em;
  padding: 3px 6px;
  border-radius: 8px;
}

<!-- language: lang-html -->

<ol>
  <li id="i1" class="active">Item 1</li>
  <li id="i2">Item 2</li>
  <li id="i3">Item 3</li>
</ol>

<!-- end snippet -->

How to style the number together with the item?

Need to add some css and css counter

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

ol {
  list-style: none;
  counter-reset: item;
}

li {
  counter-increment: item;
  margin-bottom: 5px;
}

li:before {
  content: counter(item) ".";
  width: 15px;
  margin-right: 5px;
  text-align: center;
  display: inline-block;
}

li.active {
  background-color: #212121;
  width: 14em;
  padding: 3px 6px;
  border-radius: 8px;
}

<!-- language: lang-html -->

<ol>
  <li id="i1" class="active">Item 1</li>
  <li id="i2">Item 2</li>
  <li id="i3">Item 3</li>
</ol>

<!-- end snippet -->

Use list-style-position: inside

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

li.active {
  background-color: #212121;
  width: 14em;
  padding: 3px 6px;
  border-radius: 8px;
}

ol {
  list-style-position: inside
}

<!-- language: lang-html -->

<ol>
  <li id="i1" class="active">Item 1</li>
  <li id="i2">Item 2</li>
  <li id="i3">Item 3</li>
</ol>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

li.active {
  background-color: #212121;
  width: 14em;
  padding: 3px 6px;
  border-radius: 8px;
  font-size: 1.5em;
  color: red;
}

<!-- language: lang-html -->

<ol>
  <li id="i1" class="active">Item 1</li>
  <li id="i2">Item 2</li>
  <li id="i3">Item 3</li>
</ol>

<!-- end snippet -->