<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
  <li>项目5</li>
</ul>

ul {
  counter-reset: section; /* 为每个ol元素创建新的计数器实例 */
  list-style-type: none;
}
li {
  margin: 4px 0;
}
li:before {
  counter-increment: section; /* 只增加计数器的当前实例 */
  content: counters(section, ".") " "; /* 为所有计数器实例增加以“.”分隔的值 */
  display: inline-block;
  margin: 0 10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: #333;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}