css伪元素实现有序编号

<div class="content">          <p class="index">年龄在18-60岁</p>          <p class="index">有淘宝账号</p>          <p class="index">手机实名制</p>          <p class="index">开通网银的银行卡（或信用卡）</p></div>

<style>.content {    counter-reset: index;    padding: .5rem 1.6rem;    line-height: 3rem;    border-bottom: .1rem solid #e5e5e5;} .content .index {    padding-left: 2rem;    position: relative;} .content .index:before {    content: counter(index);    counter-increment: index;    display: inline-block;    width: 1.6rem;    height: 1.6rem;    color: #e5e5e5;    font-size: 1.1rem;    text-align: center;    line-height: 1.6rem;    position: absolute;    left: 0;    top: 50%;    margin-top: -.8rem;    border-radius: 1.6rem;    border: .1rem solid #e5e5e5;}.content .index:before {    color: #47a8ef;    border: .1rem solid #47a8ef;}</style>

效果如下