# Counter Increment list, number xuongkhopbacninh.com (ok)

<figure><img src="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2Fcye1ZryhC7fNp2EhyToj%2Fimage.png?alt=media&#x26;token=7e61dc54-452a-46ce-8cad-b91214a5aadf" alt=""><figcaption></figcaption></figure>

```
.wp-block-latest-posts.wp-block-latest-posts__list li {
  counter-increment: my-awesome-counter;
  position: relative;
}
```

```
.wp-block-latest-posts.wp-block-latest-posts__list li:before {
  display: inline-block;
  content: counter(my-awesome-counter);
  background-color: #008c72;
  border-radius: 50%;
  line-height: 30px;
  color: #fff;
  text-align: center;
  margin-right: 0.5rem;
  min-width: 30px;
  min-height: 30px;
  position: absolute;
  left: -15px;
  transform: translateX(-100%);
}
```

Ví dụ 2:

```
<!DOCTYPE html>
<html>
<head>
<style>
body {
  /* Set "my-sec-counter" to 0 */
  counter-reset: my-sec-counter;
}

h2::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: "Section " counter(my-sec-counter) ". ";
}
</style>
</head>
<body>

<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Bootstrap Tutorial</h2>
<h2>SQL Tutorial</h2>
<h2>PHP Tutorial</h2>

</body>
</html>
```

<figure><img src="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2FGLBZ82IdgcXsugpOA9YE%2Fimage.png?alt=media&#x26;token=7f924df4-da8a-4f70-8fdf-360a71f535ab" alt=""><figcaption></figcaption></figure>
