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>

效果如下