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>