原生css能否实现这样的效果?

Question

html 代码

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

1,2,3 是自增长的

后来我试了下 ol-li 标签, 但是列表头样式不知道怎么调..

Answer 1

可以使用 content 计数器，样式可以自行调整，仅供参考

css

      .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%;      }

html

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

result