原生 CSS 如何实现自增长的有序列表？

原生 如何制作自增长的有序列表？

为了实现自动递增的列表编号，可以使用css 中的content 计数器：

.list {
  counter-reset: index;
}

.item::before {
  content: counter(index);
  counter-increment: index;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: red;
  color: #ffffff;
  text-align: center;
  border-radius: 100%;
}

登录后复制

<div class="list">
  <div class="item">ADHASKJ</div>
  <div class="item">XNAS</div>
  <div class="item">CSDLVL</div>
</div>

登录后复制

这种方法允许你自定义列表编号的外观，而无需使用负担较重的框架或插件。

以上就是原生 CSS 如何实现自增长的有序列表？的详细内容，更多请关注米云其它相关文章！